flex布局感悟

flex布局

1 flex布局父项常见属性

注：以下由6个属性是对父元素设置的、

1.1 各属性概况

flex-direction	设置主轴的方向
justify-content	设置主轴上的子元素的排列方式
flex-wrap	设置子元素是否换行
align-content	设置侧轴上子元素的排列方式（多行）
align-items	设置侧轴上的子元素的排列方式
flex-flow	复合属性，相当于同时设置了flex-direction和flex-wrap

 

  

 

 

 

 

 

1.2   flex-direction设置主轴的方向

  flex-direction属性决定主轴的方向（即项目的排列方向）

  注意：主轴和侧轴是变化的，就看flex-direction设置谁为主轴，剩下的就是侧轴。而我们的子元素是根据主轴来排列的

 

属性值	说明
row	默认值从左至右
row-reverse	从右到左
column	从上到下
column-reverse	从下到上

   

 

 

 

 

 

代码如下：

  /* 采用flex布局(注意是给父元素添加) */

        display: flex;

        background-color: red;

        width:80%;

        height:300px;

        background-color: pink;

        /* 默认的主轴是x轴row */

        flex-direction: row;

        /* justify-content:是设置主轴上元素的排列方式,可以从左、中、右、平分剩余空间、排列 */

        /* justify-content: center; */

        /* 先两边贴边，再分配剩余空间 */

        justify-content: space-between;

 

现象如下：

1.3  justify-content 设置主轴上的子元素排列方式

 justify-content 属性定义了项目在主轴上的对其方式

注意：使用这个属性之前一定要确定好主轴是哪个

属性值	说明
flex-start	默认值从头部开始 如果主轴是x轴，则从左至右
flex-end	从尾部开始排列
center	在主轴居中对齐（如果主轴是x轴则水平居中）
space-around	平分剩余空间
space-between	先两边贴边 再平分剩余空间

 

 

 

 

 

 

 

代码如下：

  body{

        display: flex;

        justify-content: center;

    }

    div{

        /* 采用flex布局(注意是给父元素添加) */

        display: flex;

        width:30%;

        height:300px;

        background-color: pink;

        /* flex布局中，默认的子元素是不换行的，如果装不开，会缩小子元素的宽度，放到父元素里面 */

        /* nowrap默认不换行，wrap换行 */

        flex-wrap: wrap;

    }

    div span{

       background-color: blue;

       height: 150px;

       width: 100px;     

    }

现象：

  1.4 flex-wrap 设置子元素是否换行

   默认情况下，项目都排列在一条线上（又称轴线）上。flex-wrap属性定义，flex布局中默认是不换行的。

  

属性值	说明
nowrap	默认值，不换行
wrap	换行

 

 

 

 

代码如1.3。

现象：如1.3

 

1.5 align-content 设置侧轴上的子元素的排列方式（多行）

设置子项目在侧轴上的排列方式并且只能用于子项出现换行的情况（多行），在单行下是无效果的。

属性值	说明
flex-start	默认值在侧轴的头部开始排列
flex-end	在侧轴的尾部开始排列
center	在侧轴中间显示
space-around	子项在侧轴平分空间
space-between	子项在侧轴先两边，最后平分空间
stretch	设置子项元素高度平分父元素高度

 

 

 

 

 

 

 

 

代码如下：

  /* 采用flex布局(注意是给父元素添加) */

        display: flex;

        width:40%;

        height:500px;

        background-color: pink;

        /* 换行 */

        flex-wrap: wrap;

        /* 因为有了换行，此时我们侧轴上控制子元素的对齐方式我们用align-content */

        align-content: center;

        /* align-content: flex-start; */

        /* align-content: space-between; */

        /* align-content: space-around; */

现象：

1.6 align-items 设置侧轴上的子元素的排列方式（单行）

该属性是控制子项在侧轴(默认是轴)上的排列方式，在子项是单项时使用

属性值	说明
flex-start	默认值从上到下
flex-end	从下到上
center	挤在一起居中（垂直居中）
stretch	拉伸

 

 

 

 

 

 

代码如下：

 /* 采用flex布局(注意是给父元素添加) */

        display: flex;

        background-color: red;

        width:50%;

        height:500px;

        background-color: pink;

        /* 从主轴中间对齐，默认是x轴row */

        justify-content: center;

        /* 我们需要一个侧轴居中 */

        align-items: center;

        /* 当属性值是strech时盒子会在侧轴方向拉伸,但和高度有冲突 */

        /* align-items:stretch; */

现象：

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

flex-flow:row wrap;

代码如下：

   /* 采用flex布局(注意是给父元素添加) */

        display: flex;

        width:35%;

        height:500px;

        background-color: pink;

        /* 使主轴变成y轴 */

        /* flex-direction: column; */

        /* 一行放不下，执行换行 */

        /* flex-wrap: wrap; */

        /* 上面两条语句的合写(设置主轴为y轴，并换行)*/

        flex-flow: wrap column;

现象：

2 flex属性

 flex属性定义子项目分配剩余空间，用flex来表示占多少份

代码如下：

 section{

        display: flex;

        width: 60%;

        height: 150px;

        background-color: pink;

        margin: 0 auto;

    }

    section div:nth-child(1){

        width: 100px;

        height: 150px;

        background-color: red;

 

    }

    section div:nth-child(2){

       /* 平分除去盒子1和盒子3剩下的内容 */

       flex:1;

       background-color: green;

    }

    section div:nth-child(3){

        width: 100px;

        height: 150px;

        background-color: blue;

    }

现象：