flex布局(重要)

优点：操作方便，布局简单

缺点：兼容性差

暂时只适用于移动端布局

一. 布局原理

特性

任何一个容器都可以指定为flex布局

当我们指定一个盒子为flex布局之后，该盒子的float、clear、vertical-align属性将失效

原理

采用flex布局的元素，称为flex容器，所有子元素都是容器成员

flex容器：flex container
flex项目：flex item

flex布局，是通过给父盒子添加flex属性来控制子盒子的位置和排列方式

二. flex父项常见属性

常见父属性

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

2.1 flex-direction设置主轴方向

属性值	作用
row	默认值从左到右
column	从上到下

div {
    /* 给父级添加flex属性 */
    display: flex;
    width: 800px;
    height: 300px;
    background-color: pink;
    
    /* 默认的主轴是x轴行row 那么y轴就是侧轴 */
    /* 我们的元素是跟着主轴来排列的 */
    flex-direction: row;
    /* 简单了解 翻转 */
    /* flex-direction: row-reverse; */
    /* 我们可以把我们的主轴设置为 y轴 那么 x 轴就成了侧轴 */
    flex-direction: column;
}

2.2 justify-content设置主轴上排列方式

属性值	作用
flex-start	默认值从头部开始，沿主轴方向
center	在主轴居中对齐
space-around	平分剩余空间
space-between	两边贴边，平分剩余空间（重点）

div {
    display: flex;
    width: 800px;
    height: 300px;
    background-color: pink;
    /* 默认的主轴是 x 轴 row */
    flex-direction: row;
    /* justify-content: 是设置主轴上子元素的排列方式 */
    /* justify-content: flex-start; */
    /* justify-content: flex-end; */
    /* 让我们子元素居中对齐 */
    /* justify-content: center; */
    /* 平分剩余空间 */
    /* justify-content: space-around; */
    /* 先两边贴边， 在分配剩余的空间 */
    justify-content: space-between;
}

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

flex布局默认情况下子元素是不换行的

nowrap：不换行

wrap：换行

        div {
            display: flex;
            width: 600px;
            height: 400px;
            background-color: pink;
            /* flex布局中，默认的子元素是不换行的， 如果装不开，会缩小子元素的宽度，放到父元素里面  */
            /* flex-wrap: nowrap; */
            flex-wrap: wrap;
        }

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

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

div {
    display: flex;
    width: 800px;
    height: 400px;
    background-color: pink;
    /* 默认的主轴是 x 轴 row */
    flex-direction: column;
    
    justify-content: center;
    /* 我们需要一个侧轴居中 */
    /* 拉伸，但是子盒子不要给高度 */
    /* align-items: stretch; */
    align-items: center;
    /* align-content: center; */
}

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

设置子项在侧轴上的排列方式，并且只能用于子项出现换行的情况，在单行下没有效果

属性值	作用
flex-start	默认值在侧轴的头部开始排列
center	在侧轴中间显示
space-around	子项在侧轴平分剩余空间
space-between	子项在侧轴先分布在两头，再平分剩余空间
stretch	设置子项元素高度平分父元素高度

div {
    display: flex;
    width: 800px;
    height: 400px;
    background-color: pink;
    /* 换行 */
    flex-wrap: wrap;
    /* 因为有了换行，此时我们侧轴上控制子元素的对齐方式我们用 align-content */
    /* align-content: flex-start; */
    /* align-content: center; */
    /* align-content: space-between; */
    align-content: space-around;
}

2.6 flex-flow

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

flex-flow:row wrap;

三. flex布局子项常见属性

3.1 flex属性（重要）

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

.item {
    flex:<number>; /*default 0*/
}

例如：

.item:nth-child(1) {
    flex:1;
}
.item:nth-child(2){
    flex:2;
}
/*这里第一个子元素占用1/3，第二个元素占用2/3*/

3.2 align-self控制子项再自己侧轴上的排列方式

align-self属性允许单个项目有与其它项目不一样的对齐方式，可覆盖align-items属性，默认auto，表示继承父元素align-items属性，如果没有父元素，则等同于stretch。

.item:nth-child(2) {
    /*设置自己在侧轴上的排列方式*/
    align-self:flex-end;
}

3.3 order属性定义项目的排列顺序

数值越小，排列越靠前，默认值为0，和z-index相反

.item {
    order:<number>;
}

四. 常用初始化样式：

body {
max-width: 540px;
min-width: 320px;
margin: 0 auto;
font: normal 14px/1.5 Tahoma,"Lucida Grande",Verdana,"Microsoft
Yahei",STXihei,hei;
color: #000;
background: #f2f2f2;
overflow-x: hidden;
-webkit-tap-highlight-color: transparent;
}

背景色渐变

background: linear-gradient(起始方向, 颜色1, 颜色2, ...);
background: -webkit-linear-gradient(left, red , blue);
background: -webkit-linear-gradient(left top, red , blue);

移动端开发之flex布局(重要)