想让子元素变为弹性盒子给父元素添加display:flex;设置一盒子的排列方向和对齐方式。
1.给父盒子添加样式属性,控制子元素的排列方向和对齐方式
方向:默认跟主轴对齐
flex-direction:row(默认主轴是x轴)
:column(主轴设为y轴)
对齐方式:
主轴对齐:justify-content
侧轴对齐:
单行:align-items
多行:align-content
子元素是否换行:
flew-wrap:wrap(换行)
:nowrap(不换行)
2.给子元素添加样式属性,控制自身的缩放和排列
1)占的份数 flex
前提:有剩余的空间
数值:可以是正整数(默认值为0;不能设为0;)
也可以是百分比%(相对于父元素,里面的子盒子可以给百分比)
比例值的计算:
当前父元素中,所有兄弟元素flex值得和(总份数)
如果没有flex,则默认为0,子元素不会占据剩余的空间。
2)单项目自身在侧轴的对齐方式:
align-self
3)定义项目的排列顺序:
order:0;
默认值为0,数值越小越靠前。
|
|