灵活的CSS布局：高级界面的介绍砖

1。首先引入flex

flex是flex的缩写，意思是灵活布局，用于保证盒子模型最大的灵活性。
任何容器都可以指定为flex布局（包括嵌套元素）：

div { display: flex}
复制代码

一旦元素设置了flex属性，浮动的纯垂直对齐方式将失效

2。灵活布局与普通布局对比

• 典型布局：
  • 块级元素从上到下排列
  • 元素只有高度。如果没有宽度，宽度默认为100%
  • 元素只有宽度。如果没有高度，则高度为 0
• flex 布局
  • 容器元素默认从左到右
  • 元素只有高度，如果没有宽度则宽度 0
  • 元素只有宽度，如果没有高度，则高度默认为100%

flex容器的默认元素有两个轴：水平主轴（main axis）和垂直交叉轴（cross axis）。单个元素所占据的主轴空间称为主维度，交叉轴称为交叉维度。下图很好地说明了这一点：

3.

• flex-direction flex 属性可更改主轴的方向。默认行水平布局。属性包括 |行 行反转 |专栏 | column-translation
• flex-wrap 控制元素的环绕。属性包括 nowrap |包装 | wrap-reverse
• align-content 控制多个轴的对齐方式。如果项目只有一个轴，则此属性无效。属性包括 flex-start |弯曲端 |中心 |空间|周围空间| stretch
• justify-content 控制主轴上的对齐方式。属性包括 flex-start |弯曲端 |中心 |空间| space-around
• align-items 控制交叉轴上的对齐方式。包含诸如 flex-start | 之类的属性弯曲端 |中心 |基线 | stretch
• align-self 该属性允许单个元素以不同于其他元素的方式对齐。包含的属性 auto |弹性启动 |弯曲端 |中心 |基线 | stretch
• order属性控制元素的排列顺序。值越低，布局越高。
• flex-grow 属性定义元素的缩放比例。默认为0，表示如果还有空闲空间，则不会扩大。
• flex-shrink 属性定义元素的收缩率。默认值为1，这意味着如果没有足够的空间，元素就会收缩。
• flex-basis 属性定义元素在主轴上占据的位置。默认值为 auto，即元素的原始大小。
• flex 属性是 flex-grow、flex-shrink 和 flex-basis 的缩写。默认值为 0 1 自动。

您可以使用flex来排列屏幕，也可以练习使用flex属性

4。 flex的应用

• 使用flex可以实现中间不太好的布局。如果有IE要求，建议使用浮动布局。

  作者：大Rick
  链接：https://juejin.im/post/5c8664545188257e826aa73f
  来源：掘金版权归作者所有。商业转载请联系作者获得许可。非商业转载请注明来源。