初识flex布局

弹性布局

弹性布局是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。 使用方法：父元素设置display:flex

注意：父元素属性设置了flex布局其子元素的float,clear,vertical-align将无效

常用属性（父元素/容器））

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

主轴与侧轴

在flex布局中，分为主轴和侧轴两个方向，也叫做行和列，x轴和y轴

• 默认主轴方向是x轴水平向右
• 默认侧轴方向是y轴垂直向下

flex-direction设置主轴方向 通过flex-direction设置谁为主轴，剩下的就是侧轴，而我们的子元素（项目）就是跟着主轴来排列的

1. row：默认值（x轴）
2. row-reverse ：x轴元素从右到左排列（与row相反）
3. column：从上到下
4. column-reverse：从下到上（与column相反）

flex-direction 调整子元素的排列方向（默认水平方向row）column(垂直)

.main{
            width:400px;
            height:300px;
            border:1px solid red;
            margin: 0 auto;
            display: flex;
            flex-direction:column;//
        }

在这里插入图片描述

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

1. flex-start 默认值 从头部开始，如果主轴是x轴侧从做到右
2. flex-end 与flex-start相反
3. center 在主轴居中对齐（如果主轴是x轴侧水平居中）
4. space-around 平分剩余空间
5. space-between |左右的盒子贴近父盒子，中间的平均分布空白间距

space-between左右的盒子贴近父盒子，中间的平均分布空白间距

在这里插入图片描述

space-around每个盒子平均分配父元素留下的左右间距

在这里插入图片描述

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

1. stretch默认，使子元素的高度拉伸填充父容器（在子元素不指定高度的情况）
2. flex-start顶部对齐
3. flex-end底部对齐
4. center垂直居中

flex-warp控制是否换行

1. nowwap不换行（压缩形式显示）
2. wrap自动换行
3. wrap-reverse自动换行（以相反的顺序）

align-content设置侧轴上的子元素排列方式（多行） 前提：必须设置父元素display:flex flex-direction:row

1. stretch使子元素的高度拉伸填充父容器（在子元素不指定高度的情况）
2. center垂直居中
3. flex-start顶部对齐
4. flex-end底部对齐
5. space-between左右的盒子贴近父盒子，中间的平均分布空白间距
6. space-around每个盒子平均分配父元素留下的左右间距

center

在这里插入图片描述

space-around

在这里插入图片描述

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

/*主轴方向x,超过换行*/
flex-flow:row wrap

子元素属性

• order:设置元素排列顺序，值越小排在最前，默认0
• flex-grow num:定义子元素的放大比例;如果父元素还有剩余空间，可指定相应子元素占满父元素空间
• flex-shrink:定义子元素的缩小比例; 如果父元素空间不够，可指定相应子元素缩小相应比例。默认自动
• flex flex-grow和flex-shrink的复合属性,简单理解为占多少份
• anign-self：设置单个子元素的对齐方式

注意： Internet Explorer 和 Safari 浏览器不支持 align-self 属性。