flex弹性布局

容器属性

• flex-direction：布局方向，默认row
  • row：按行排列，从左到右
  • row-reverse：按行排列，从右到左，同时向右浮动
  • column：按列排列，正序
  • column-reverse：按列排列，逆序，但不会浮动
• flex-wrap：项目排列是否换行，默认nowrap
  • wrap：换行
  • nowrap：不换行
  • wrap-reverse：换行，并且从最后一行开始排列
  • 假如和 flex-direction 冲突，以后者为准
• justify-content：内容沿x轴排列方式（main），默认 flex-start
  • flex-start：从最左边开始排列
  • flex-end：从最右边排列
  • center：居中排列
  • space-between：列之间的间距相等，且充满整个容器，最顶端列和最低端列都会与容器边界接触
  • space-around：列之间间距相等，且与容器边界有一定距离
• align-item：项目有多列的时候，对列之间的排列进行设置，默认 stretch
  • stretch：充满整个容器，且给每个项目分配的 height 属性相同
  • flex-start：从最顶端开始排列
  • flex-end：从最底端开始排列
  • center：居中排列
  • baseline：其余项目的第一行内容和第一个项目的第一行内容对齐
• align-content：项目有多行的时候，进行行之间的设置，内容沿y轴排列方式（cross），默认 stretch
  • stretch：等高充满容器
  • flex-end：对齐底端
  • flex-start：对齐顶端
  • space-around：间隔相等
  • space-between：顶端、底端对齐，间隔相等
  • center：居中
• flex-flow：flex-diretion：row 和 flex-wrap：nowrap 的简写

项目属性

• order：使用数字来确定优先级，数字越大优先级越低，默认1
• flex-grow：放大倍数
• flex-shrink：缩小倍数
• flex-basis：自定义大小，默认 auto
• align-self：自定义布局格式，属性基本和父容器的 align-item 基本相同，多了一个 auto，默认继承父容器属性
• flex：flex-grow、flex-shrink 和 flex-basis 的简写形式，默认值为 0 1 auto；
  • flex: none 为 0 0 auto；
  • flex: auto 为 1 1 auto

三列布局

<style>
   .content{
       height: 600px;
       display: flex;
       justify-content: space-between;
       align-items: stretch;
   }
   .child{
       margin: 10px;
       background-color: red;
       width: 100%;
   }
</style>
<div class="content">
   <div class="child">1</div>
   <div class="child">2</div>
   <div class="child">3</div>
</div>

• 参考资料：flex布局语法教程