0

HTML5弹性布局-父级的属性

已有 194 阅读此文人 - - H5 -

弹性布局的概念- 1:容器(只要给标签秒了display:flex;就称为容器);2:项目(容器的之间子元素称之为项目)。

一:水平的对齐方式如下:

1:justify-content:flex-end;//水平居右对齐—在div1、2、3的父级box中添加水平居右的样式即可

2:justify-content:cener;//水平居中对齐—在div1、2、3的父级box中添加水平居中的样式即可

3:justify-content:space-between;//两端对齐、水平居中对齐—在div1、2、3的父级box中添加两端水平居中对齐的样式即可

4:justify-content:space-around;//拉手分布(平均水平居中对齐)—在div1、2、3的父级box中添加拉手分布对齐的样式即可

二:垂直对齐方式如下:

1:align-items:flex-end;//垂直居低对齐-在div1、2、3的父级box中添加垂直居低对齐即可

2:align-items:center;//垂直居中对齐—在div1、2、3的父级box中添加垂直居中对齐即可

3:align-items:stretch;//默认拉伸(如果子高是100%就会和父级同高)—div1、2、3高设为100%,就会和它父级box同高

4:flex-direction:column;//纵向对齐,起点在上,终点在下(Y轴)—在div1、2、3的父级box中添加纵向对齐即可

5:flex-wrap:wrap;//换行—在div1、2、3的父级box中添加换行即可(不加换行默认会缩小)

期待你一针见血的评论,Come on!