弹性盒模型flexbox

弹性盒模型用到的一些属性
1、写在父元素上的属性
1)开启弹性布局(元素认水平排列)
display:flex;

2)设置子元素的排列方式(即弹性盒的方向)
flex-direction: ;
row 认值,子元素从左往右排列
row-reverse 子元素从右往左排列
column 子元素从上往下排列
column-reverse 子元素从下往上排列

3)设置子元素在主轴的对齐方式
认主轴为x轴,侧轴为y轴;但当子元素垂直排列时, y轴为主轴,侧轴为x轴
justify-content: ;
flex-start 认值,弹性盒的开始
flex-end 弹性盒的结束
center 居中
space-between 在子元素之间平均分配父元素剩余的空间
space-around 在子元素四周分配父元素剩余的空间,两端是中间的一半

4)设置子元素在侧轴的对齐方式
align-items: ;
flex-start 认值,弹性盒的开始
flex-end 弹性盒的结束
center 居中

2、写在子元素上的属性
flex-grow: number; 子元素占父元素剩余空间的比例

注: float在弹性盒模型中不生效

相关文章

一:display:flex布局display:flex是一种布局方式。它即可以...
1. flex设置元素垂直居中对齐在之前的一篇文章中记载过如何...
移动端开发知识点pc端软件和移动端apppc端软件是什么,有哪些...
最近挺忙的,准备考试,还有其他的事,没时间研究东西,快周...
display:flex;把容器设置为弹性盒模型(设置为弹性盒模型之后...
我在网页上运行了一个Flex应用程序,我想使用Command←组合键...