弹性盒布局及flex容器属性

弹性盒布局：display：flex；

          display：inline-flex；（两个元素在一行显示）

      作用：控制子集在“主轴”上排列

       显示规则：所有的子元素都会在主轴上排列

                  默认X为主轴

                  如果设置X为主轴，那Y为侧轴

                  如果设置Y为主轴，那X为侧轴

       设置方法：父元素必须为弹性盒

设置为display：flex；

1. 弹性盒，子元素默认在主轴排列，默认X为主轴
2. 父元素为弹性盒，子元素都能设置宽高
3. 父元素为弹性盒，让子元素在弹性盒中上下左右居中，只需要设置margin：auto；

设置display：flex/inline-flex；对子元素的影响

       子元素的float和clear无效

扫描二维码关注公众号，回复： 10053692 查看本文章

       Vertical-align（元素垂直对齐方式）无效

flex容器（父元素）属性：

决定主轴的方向flex-direction：；

           row     水平方向主轴

           row-reverse   水平反向主轴

           column    垂直主轴

           column-reverse  垂直反向主轴

子元素换行：flex-wrap：

       nowrap          不换行

       wrap            换行

       wrap-reverse    反向换行

主轴方向和子元素是否换行的综合写法：flex-flow：；默认值为row nowrap;

定义了项目（子元素）在主轴上的对齐方式。justify-content：；

      flex-start        在主轴起始位置

       flex-end          在主轴终点位置

       center            整体居中

       space-around      完全自动分配

       space-between     两端对齐，其余自动分配

align-items：；子元素在侧轴上的对齐方式：

      flex-start        在主轴起始位置

       flex-end          在主轴终点位置

       center            整体居中

       baseline          基线对齐

       stretch           默认值

    align-content：；多行元素在侧轴上的对齐方式，多行元素才有效

      flex-start        在主轴起始位置

       flex-end          在主轴终点位置

       center            整体居中

       space-around      完全自动分配

       space-between     两端对齐，其余自动分配

       stretch           默认值

项目（子元素）属性：

   align-self：；子元素在侧轴上的对齐方式。

       stretch       元素被拉伸以适应容器（此元素不设置宽度高度）。

       center        元素位于容器的中心。

       flex-start    元素位于容器的开头。

       flex-end      元素位于容器的结尾。

      auto          默认值。元素继承了它的父容器的 align-items 属性。

                         如果没有父容器则为 "stretch"。

order：number排序优先级，数字越大越往后排，默认为0，支持负数。

   flex：复合属性。设置或检索弹性盒模型对象的子元素如何分配空间

 

vertical-align：；元素垂直对齐方式

top        顶部对齐

middle    中间对齐

bottom     底部对齐

针对inline-black和inline元素有效