Flex布局Guides

FlexBox布局

Flex布局基本要素

Flex布局是一个完整的模块而不是一个单独的属性,其中包括了很多的属性.其中有设置在父元素上的称为"container"的属性和设置在"flex items"上的属性,下图是Flex布局的主要思想,<br />    ![00-basic-terminology.svg](https://cdn.nlark.com/yuque/0/2020/svg/1462585/1590364706028-130a9c31-790e-4f76-9c36-5fd54191a596.svg#align=left&display=inline&height=297&margin=%5Bobject%20Object%5D&name=00-basic-terminology.svg&originHeight=141&originWidth=300&size=40953&status=done&style=none&width=627)

• main axis———flex container 的主轴,他的作用是 flex items布局方向,当心,主轴不一定是水平的,他的方向依赖于flex-direction属性的设置
• cross axis———他的方向依赖于 main axis的布局

container主要属性

display-该属性定义了一个flex盒子

.container {
  display: flex; /* or inline-flex */
}

flex-direction-定义了主轴方向

.container {
  flex-direction: row | row-reverse | column | column-reverse;
}

• row-items从左往右设置
• row-reverse-items从右往左设置
• column-items从上往下设置
• column-reverse-items从下往上设置

flex-wrap-flex items是否换行

• nowrap-元素会保持在同一行中,不会换行(默认)
• wrap-元素会换行
• wrap-reverse-元素会换行,但是换行之后元素的排列顺序会相反,left-right,bottom-top

  flex-flow-将flex-direction和flex-wrap合在一起写

  .container {
  flex-flow: column wrap;
  }

  justify-content

  控制元素items在main axis 上的排布

  .container {
  justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly | start | end | left | right ... + safe | unsafe;
  }

  

  align-content

  控制元素items在cross axis 上的排布

  .container {
  align-items: stretch | flex-start | flex-end | center | baseline | first baseline | last baseline | start | end | self-start | self-end + ... safe | unsafe;
  }

  

  Flex-items的属性

  order-控制items的排列顺序

  .item {
  order: 5; /* default is 0 */
  }

  

  flex-grow

  这定义了flex项在必要时增长的能力。它接受一个作为比例的无单位值。它指定项目在flex容器中应该占用多少可用空间。如果所有项目都将flex-grow设置为1，则容器中的剩余空间将平均分配给所有子元素。如果其中一个子元素的值为2，那么剩余的空间将会占用两倍于其他子元素的空间(至少它会尝试这样做)。
  

  .item {
  flex-grow: 4; /* default 0 */
  }

  align-self

  设置某一个特定items的对齐方式
  

  .item {
  align-self: auto | flex-start | flex-end | center | baseline | stretch;
  }