css横排布局,CSS3（⼀）横向布局（Flex）前⾔
前端的div默认是占据⼀⾏；⽽如果想在⼀⾏中放多个div，flex布局就是解决这⼀问题的最好⽅式；
当然flex也可进⾏纵向布局，⽽本章中主要讲解横向布局；
flex布局对齐方式所以下边的属性，⼀般都以横向布局的眼光来讲解。
⼀、介绍
flex布局⼜称弹性盒⼦，是⼀种当页⾯需要适应不同的屏幕⼤⼩以及设备类型时确保元素拥有恰当的⾏为的布局⽅式。
弹性盒⼦由弹性容器(Flex container)和弹性⼦元素(Flex item)组成。
弹性容器外及弹性⼦元素内是正常渲染的。
弹性盒⼦只定义了弹性⼦元素如何在弹性容器内布局。
弹性⼦元素通常在弹性盒⼦内⼀⾏显⽰。默认情况每个容器只有⼀⾏。
⼆、使⽤⽅式
1. 基础使⽤
设置弹性容器的display属性为flex
a
b
c
...
.flexContainer {
display: flex;
background-color: gray;
width: 300px;
height: 100px;
}
.flexItem {
width: 80px;
height: 80px;
}
效果图⽚
2.排列⽅式flex-direction
使⽤flex-direction属性，可设置弹性⼦元素的排列⽅式
row：横向，从左向右，左对齐
row-reverse：横向，从右向左，右对齐
column：纵向，从上到下，上对齐
column-reverse：纵向，从下岛上，下对齐
.flexContainer {
display: flex;
flex-direction: column-reverse; // 设置此属性
background-color: gray;
width: 300px;
height: 300px;
}
3.对齐⽅式justify-content
使⽤justify-content属性，可设置⼦元素的对齐⽅式
flex-start：开头对齐
flex-end：结尾对齐
center：居中
space-between：平均分布，但两边不留控件
space-around：平均分布，两边留空间
截图
justify-content是受flex-direction影响的
4.纵向对齐⽅式align-items
使⽤align-items属性，可设置⼦元素纵向的对齐⽅式；
flex-start：顶部对齐
flex-end：底部对齐
center：居中
baseline：(未使⽤，暂不了解)
space-around：(未使⽤，暂不了解)
截图
5.纵向对齐⽅式align-self
align-self与align-items不同之处在于：
align-items是弹性容器的属性，⽤来统⼀设置⼦元素的；
align-self是弹性⼦元素的属性，⽤来单独设置某⼀个⼦元素的；
start
center
end
效果图

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