Flex布局学习

 原理：给父容器添加flex布局，改变子项目的位置和排列方式

• 父容器常用属性

  • flex-direction，子项目是跟着主轴的方向排列的

    • row，x轴是主轴，y为侧轴，子项目从左到右排列，row-reserve为从右向左

    • column，y轴为主轴，x为侧轴，子项目从上到下排列，column-reserve从下到上

    • 主轴是谁取决于flex-direction的值，不设置默认为row

  • justify-content，设置主轴上子元素的对齐方式，使用之前先确定主轴

    • flex-start，子项目与主轴的开始位置对齐

    • flex-end，子项目与主轴的结束位置对齐

    • flex-center，子项目与主轴的中间位置对齐，主轴居中

    • space-around，子项目平分剩余空间

    • space-between，子项目先两边贴边（第一个和最后一个贴别），再平分剩余空间

  • flex-wrpa，设置子项目是否换行显示

    • flex的原本布局中默认是不换行的，如果宽度超过了父容器，则会缩小子项目的宽度

    • nowrap，默认值，不换行

    • wrap，会换行显示

  • align-items、align-content（多行），设置子项目在侧轴上的对齐方式，align-centent单行是没有效果的

    • flex-start，子项目与侧轴的开始位置对齐

    • flex-end，子项目与侧轴的结束位置对齐

    • center，在侧轴居中

    • stretch，子项目沿着侧轴拉伸（未设置高度时）

  • flex-flow，是flex-direction和flex-wrap的复合属性

    • flex-flow: column wrap，设置主轴为y且自动换行

• 子元素常用属性

  • flex，用于子项目分配剩余空间，用flex表示占用多少份数

  • align-self，控制子项目自己在侧轴上的排列方式

    • 允许单独给某一个子项目添加这个属性，会覆盖掉父容器的align-item属性

    • 属性值可参考align-items

  • order，定于子项目的排列顺序，不改变html的结构；数值越小，排列越靠前