建设网站布局中display: flex;是什么意思?煜阳网络公司网站建设工程师,在给你一个客户建设网站的时候遇到一个布局排列不整齐的,
一:display:flex 布局
display:flex 是一种布局方式。它即可以应用于容器中,也可以应用于行内元素。是W3C提出的一种新的方案,可以简便、完整、响应式地实现各种页面布局。目前,它已经得到了所有浏览器的支持。
Flex是Flexible Box的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性。设为Flex布局以后,子元素的float、clear和vertical-align属性将失效。
二:flex的六个属性
flex-direction 容器内元素的排列方向(默认横向排列)
1:flex-direction:row; 沿水平主轴让元素从左向右排列
1536039075.png
2:flex-direction:column; 让元素沿垂直主轴从上到下垂直排列
1536039314(1).png
3:flex-direction:row-reverse;沿水平主轴让元素从右向左排列
1536039460(1).png
flex-wrap 容器内元素的换行(默认不换行)
1:flex-wrap: nowrap; (默认)元素不换行,比如:一个div宽度100%,设置此属性,2个div宽度就自动变成各50%;
2:flex-wrap: wrap; 元素换行,比如:一个div宽度100%,设置此属性,第二个div就在第二行了;
justify-content 元素在主轴(页面)上的排列
1:justify-content : center;元素在主轴(页面)上居中排列
Tag:
什么
建设
网站