首页 > 代码库 > 弹性布局display:flex
弹性布局display:flex
1.flex-direction：设置伸缩项目的排列方式，即主轴的方向
row 设置从左到右排列
row-reverse 设置从右到左排列
column 设置从上到下排列
column-reverse 设置从下到上排列
2.justify-content：调整主轴方向上的对齐方式，对于弹性盒子内元素
flex-start 伸缩项目以起始点靠齐
flex-end 伸缩项目以结束点靠齐
center 伸缩项目以中心点靠齐
space-between 伸缩项目平局分布
space-around 同上，但两端保留一半的空间
ul{
padding: 0;
width:800px;
height:800px;
list-style: none;
border: 1px solid red;
display: flex;
flex-direction:row;
justify-content:space-around;
}
li{
width:200px;
height: 200px;
text-align: center;
line-height: 200px;
}
3.align-items：调整侧轴方向对齐方式
flex-start 伸缩项目以顶部为基准，清理下部额外空间
flex-end 伸缩项目以底部为基准，清理上部额外空间
center 伸缩项目以中部为基准，平均清理上下部额外空间
baseline 伸缩项目以基线为对齐，清理额外的空间
stretch 伸缩项目填充整个容器，默认
ul{
padding: 0;
width:800px;
height:800px;
list-style: none;
border: 1px solid red;
display: flex;
flex-direction:row;
align-items:flex-end;
justify-content:space-between;
}
ul{
padding: 0;
width:800px;
height:800px;
list-style: none;
border: 1px solid red;
display: flex;
flex-direction:row;
align-items:stretch;
justify-content:space-between;
}
li{
width:200px;//指定高度，才能拉伸
text-align: center;
line-height: 200px;
}
4.flex-wrap控制是否换行
nowrap 默认值，都在一行或一列显示 ，会自动改变盒子内元素宽度
wrap 伸缩项目无法容纳时，自动换行
wrap-reverse 伸缩项目无法容纳时，自动换行，方向和 wrap 相反
5.align-content：堆栈排列，应用flex-wrap：wrap后换行进行控制，调整行之间的位置。用于多行，要设置父容器的高度
flex-start
flex-end
center
space-between
space-around
stretch默认
6.flex-flow：flex-direction和flex-wrap的简写
7.flex：控制伸缩容器内父盒子剩余空间的分配比例
li{
text-align: center;
line-height: 100px;
margin:10px;
}
li:nth-child(1){
flex:1;
}
li:nth-child(2){
flex:3;
}
li:nth-child(3){
flex:1;
}
li:nth-child(1){
flex:1;
}
li:nth-child(2){
flex:3;
}
li:nth-child(3){
flex:1;
}
li:nth-child(4){
width:400px;
}
8.align-self，子元素覆盖父元素设置的align-items，属性值也是flex-start、flex-end、center、baseline、stretch
ul{
align-items:flex-start;
}
li:nth-child(2){
align-self:center;
}
9.order，设置伸缩项目的顺序
li:nth-child(1){
order:3;
}
li:nth-child(2){
order:1;
}
li:nth-child(3){
order:2;
}
弹性布局display:flex
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。