一、dispaly:flex
display:flex 是一种布局方式。它即可以应用于容器中,也可以应用于行内元素。是W3C提出的一种新的方案,可以简便、完整、响应式地实现各种页面布局。
flex-direction:容器内元素的排列方向(默认横向排列)
flex-wrap :容器内元素的换行(默认不换行)
justify-content: 元素在X轴上的排列
align-items :元素在Y轴方向上的对齐方式
align-content :在弹性容器内的元素没有占用交叉轴上所有可用的空间时对齐容器内的各项(垂直)
(1)flex-direction: ;
设置 <div> 属性规定灵活项目的方向。
row属性: /* 灵活的项目将水平显示,正如一个行一样。 */
咧如:
row-rever属性: row-reverse与 row 相同,但是以相反的顺序
咧如:
column属性: | 灵活的项目将垂直显示,正如一个列一样。 |
咧如:
/* columu属性:4. column-reverse 与 column 相同,但是以相反的顺序。 *