85

articles-translator/理解CSS Flexbox.md at master · neal1991/articles-translator...

 6 years ago
source link: https://github.com/neal1991/articles-translator/blob/master/%E7%90%86%E8%A7%A3CSS%20Flexbox.md?
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.

理解 CSS Flexbox

原文：Understanding CSS Flexbox

译者：neal1991

welcome to star my articles-translator, providing you advanced articles translation. Any suggestion, please issue or contact me

LICENSE: MIT

68747470733a2f2f63646e2d696d616765732d312e6d656469756d2e636f6d2f6d61782f323030302f312a78706a7939766d6f5959525f355247504271516f49772e706e67

你有没有想过如何最好地使用 flexbox 来排列元素？ 如果你再也不能 忍受 CSS Float hack，让我们深挖一下，并学习如何使用 Flexbox。

oOLUe.png

什么是 Flexbox?

让我们来注意两个与 Flexbox 属性配合使用的重要元素; Flex Container 和 Flex Item。

Flex Container 显然被设置为父元素，而 Flex Items 是 Flex Container 的直接子元素。

因此，Flexbox 布局使得 Flex Container 能够调整 Flex Item 的宽度和高度，以适应各种显示设备和屏幕尺寸的可用空间。

如上所述，在 flex container 中存在一个或者多个 flex item。

Flex Container 中的 Flexbox 属性

  1. Display: Flex

在下图中，我们有四个框，默认情况下每个框是一个块元素; 也就是说，他们应该占据整行。 Flexbox 可以在所有容器的直接孩子（即四个盒子）上启用 flex 属性，而四个框则以内联方式显示。

68747470733a2f2f63646e2d696d616765732d312e6d656469756d2e636f6d2f6d61782f323030302f312a686236744f6c2d376270425f784f56325844473347412e706e67
.container {
   display: flex;
}
  1. Flex Direction

我们经常尝试垂直或水平对齐菜单列表项。 然后，我们必须使用列表项，然后将无序列表的css属性显示为 display-inline。

但是通过Flex Container 的 Flex-direction，它可以帮助我们指定容器内的 Flex Item 的对齐方向（比如从左到右或从右到左）。 以下是 flex-direction 的属性：

row, row-reverse, column and column-reverse.

68747470733a2f2f63646e2d696d616765732d312e6d656469756d2e636f6d2f6d61782f323030302f312a76506b53647a366b6632794646504c4e5f306f4259672e706e67

​ display: flex; flex-direction: column;

.container {
   display: flex;
   flex-direction: column;    /** lays the Flex Items vertically from top to bottom **/
}

68747470733a2f2f63646e2d696d616765732d312e6d656469756d2e636f6d2f6d61782f323030302f312a686236744f6c2d376270425f784f56325844473347412e706e67

​ display: flex; flex-direction: row;

.container {
   display: flex;
   flex-direction: row; /** Places the Flex Items from left to right **/
}
  1. Flex Wrap

让我们假设我们在我们团队的页面上有一个包含12张个人资料照片的画廊，我们可以选择将所有12张图片连续放置，或者将图片包装放在其他行上。

借助 Flex-wrap，我们可以将所有图像保留在一行上，或者轻松地包装到另一行中。 以下是 flex-wrap 的属性：

nowrap, wrap and wrap-reverse.

images are not wrapped to another line and this looks terrible

​ 图片没有包装到另一行并且这看起来很糟糕

.container {
   display: flex;
   flex-wrap: nowrap; /** default property. all profile pictures will be on one line **/
}

images will wrap onto new lines

​ 图片将会包装到新行中

.container {
    display: flex;   
    flex-wrap: wrap; /** images will wrap onto another line if necessary, from top to bottom **/
}
  1. Justify Content

对于 Justify-content 具有以下属性:

flex-start, flex-end, center, space-around and space-between.

68747470733a2f2f63646e2d696d616765732d312e6d656469756d2e636f6d2f6d61782f323030302f312a44543369724e4f3238434d6c5465454f427956544a512e706e67
.container {
   display: flex;
   justify-content: flex-start;
   border: 1px solid black;
}

68747470733a2f2f63646e2d696d616765732d312e6d656469756d2e636f6d2f6d61782f323030302f312a566f504d576b4b5252622d58375838466658523765412e706e67
.container {
   display: flex;
   justify-content: flex-end;
border: 1px solid black;
}

68747470733a2f2f63646e2d696d616765732d312e6d656469756d2e636f6d2f6d61782f323030302f312a465a65656368685144314956746132475f564a674c672e706e67
.container {
   display: flex;
   justify-content: center;
border: 1px solid black;
}

68747470733a2f2f63646e2d696d616765732d312e6d656469756d2e636f6d2f6d61782f323030302f312a355a4c58464d484a33433235305a7a6c6f76417268772e706e67
.container {
   display: flex;
   justify-content: space-between;
border: 1px solid black;
}

68747470733a2f2f63646e2d696d616765732d312e6d656469756d2e636f6d2f6d61782f323030302f312a7841356a41676832487a504e596571585958444631772e706e67
.container {
   display: flex;
   justify-content: space-around;
border: 1px solid black;
}

5. Align Items

就像对齐内容一样，align-items 帮助我们对齐横轴上的flex项目，即从上到下垂直排列，在某些情况下从下到上排列。

我们有以下属性的对齐项目：

flex-start, flex-end, center, stretch and baseline.

cards align on the top of the cross-axis
.container {
  height: 50vh;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
  border: 1px solid black;
}

cards align on the end of the cross-axis
.container {
  height: 50vh;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-end;
  border: 1px solid black;
}

68747470733a2f2f63646e2d696d616765732d312e6d656469756d2e636f6d2f6d61782f323030302f312a767a7048745253677a534d4352497a4e6a50376f47512e706e67
.container {
  height: 50vh;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: baseline;
  border: 1px solid black;
}

cards are of different heights but they still align at the center

​ 不同高度的图片仍然居中

.container {
  height: 50vh;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  border: 1px solid black;
}

Flex item img height has to be set to auto else the height property will override the stretch property.

Flex item img 的 height 必须设置为 auto，否则 height 属性会覆盖 stretch 属性

.container {
   height: 50vh;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: stretch;
border: 1px solid black;
}

Flexbox Examples

<div class="wrapper">
  <div class="card card-1">1</div>
  <div class="card card-2">2</div>
  <div class="card card-3">3</div>
  <div class="card card-4">4</div>
</div>

.wrapper {
  height: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: center;
  border: 1px solid black;
} 
.card {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 120px;
  height: 120px;
  background-color: green;
  margin: 10px;
  color: #fff;
  font-size: 36px;
  font-weight: 600;
}
.card-1 {
  background-color: red;
}
.card-2 {
  background-color: brown;
}
.card-3 {
  background-color: purple;
}
.card-4 {
  background-color: green;
}

codepen

display: flex; flex-wrap: wrap; justify-content: flex-start; align-items: center;

.wrapper {
  height: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  border: 1px solid black;
}  
.card {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 120px;
  height: 120px;
  background-color: green;
  margin: 10px;
  color: #fff;
  font-size: 36px;
  font-weight: 600;
}
.card-1 {
  background-color: red;
}
.card-2 {
  background-color: brown;
}
.card-3 {
  background-color: purple;
}
.card-4 {
  background-color: green;
}

codepen

总结

我们已经讨论了Flex Container 的 flexbox 属性及其对齐 flex item 的影响。 我希望在后面的文章中更多地介绍Flex Item 中的 Flexbox propeties。 如果这篇文章对你有帮助，请给予一些绿色的鼓掌或下面的评论。 感谢你的阅读！


report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK