弹性display：flex布局⾃看笔记
基础概念
块级元素默认的display 属性都是block 状态，⽽当给块级元素display 属性加上flex值，flex 布局就被创建
⽐如div 直接设置 display:flex，这时候当div被称为 flex 容器，⾥⾯的⼦项元素称之为 flex ⼦项
flex 容器布局也叫弹性布局的诞⽣，单靠⼀个属性值，⽆法满⾜布局需求，因此为满⾜布局需求，还需要围绕flex 布局⽽产⽣的相关属性，⽽这些相关属性恰好分为两部分 ⼀部分作⽤与flex 容器；另⼀部分作⽤域flex⼦项
点击下⾯链接快速索引
作⽤于flex容器属性
作⽤于flex⼦项属性
⼩提⽰ 不管是作⽤在flex容器还是flex⼦项上，最终都是通过flex⼦项内容展现出来，需要区别的是⼀个是作⽤整体⼀个是作⽤具体的单个
flex 概念还有⼀个内容叫排序：
通过主轴（main axis）和交叉轴（cross axis）
默认情况下，主轴和x轴相同，交叉轴和y轴相同。弹性盒⼦默认会按主轴x轴排列，看上去的表现形式就是从浏览器的左边到右边排序；
友情提⽰
设为Flex布局以后，⼦元素的float、clear和vertical-align属性将失效
本篇测试属性的笔记HTML结构都是基于如下结构
<div class="container"><!--  flex 容器-->
<div><!--  flex ⼦项-->
<img src="./images/1.jpg">
</div>
<div><!--  flex ⼦项-->
<img src="./images/2.jpg">
</div>
<div><!--  flex ⼦项-->
<img src="./images/3.jpg">
</div>
</div>
同时为了清晰的看到排序问题图⽚上标注了顺序，当然美⼥图⽚也⽐较养眼；
作⽤在flex 容器的css属性
容器⼦项⽬的排列⽅向(默认从左到右排序)，可以从上倒下，从下到上，从左到右，从右到左；
语法
flex-direction: row | row-reverse | column | column-reverse;
row默认值 ⽔平排序 ⽅向从左到右
row-reverse⽔平排序 ⽅向从右到坐 和 row相反
column垂直排序 ⽅向从上倒下
column-reverse垂直排序 ⽅向从下倒上 和column 相反
row
这个属性可以不⽤写，只要是flex容器⾃动出发就是这个
.container{
display:flex;
/* 默认值可以写或者不写*/
flex-direction:row;
}
效果
row-reverse
.container{
display:flex;
flex-direction:row-reverse;
}
效果
column
.container{
display:flex;
flex-direction:column;
}
column-reverse 效果
容器控制⼦项布局是否换⾏，默认单⾏显⽰不换⾏
语法
flex-wrap: nowrap | wrap | wrap-reverse;
参数
nowrap默认值 不换⾏ 单⾏显⽰
wrap宽度不⾜换⾏显⽰换⾏ 从左到右，从上到下
wrap-reverse宽度不⾜换⾏显⽰ 换⾏ 但是 排序是从下往上，从左到右，实际项⽬很少⽤⽰例：
nowrap 默认值不换⾏，在渲染的时候很容易出现溢出；
.container{
display:flex;
flex-wrap: nowrap;
}
溢出
⼩知识点：如何不换⾏且不溢出？，即让⾃动⽆限缩⼩内容
可以让图⽚⾃适应 ⼦项的宽带，在flex中⼦项的宽度可以⽆限⼩，因为没有定义⼦项宽度
.container{
display:flex;
flex-wrap:nowrap;
}
.container img{
max-width: 100%;
}
效果
可以看到图⽚⼩了很多
wrap效果
wrap-reverse效果
flex-direction和flex-wrap的缩写 默认是row nowrap 中间⽤空格隔开
语法
flex-flow: <flex-direction> || <flex-wrap>;
从右到左换⾏效果
复合写法
.container{flex布局详细讲解
display:flex;
flex-flow: row-reverse  wrap;
}
flex容器控制内容 在主轴的对齐和分布⽅式，主轴是通过 确定那个⽅向
默认往左对齐
语法
justify-content: flex-start | flex-end | center | space-between | space-around| space-evenly;
参数
flex-start默认值 依据主轴对⽅向往左对齐或者从上开始对齐（基本不⽤）
flex-end依据主轴对⽅向往右对齐或者从下开始对齐（基本不⽤）
center依据主轴居中对齐
space-between依据主轴居两端对齐
space-around每个项⽬两侧的间隔相等。所以，⼦项⽬之间的间隔⽐项⽬与边框的间隔⼤⼀倍，有点像margin和padding这种对左右边距对味道space-evenly每个flex⼦项两侧空⽩间距完全相等
⽰例效果 说明主轴统⼀取默认值 flex-direction:row;⽔平⽅向，实际中⽤对最多对也是这个
⽰例：
flex-end
.container{
display:flex;
justify-content:flex-end;
}

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。