导航

专业做网站建设公司、网页设计制作、百度优化推广、网站维护托管等网站相关业务,欢迎咨询。

域名空间 | 服务领域  网站建设1500元全包。做完验收修改到满意为止可淘宝付款有保证!
当前位置: 邯郸网站建设 > 网页设计制作百科 > 常见问题

建设网站布局中display: flex;是什么意思


来源:邯郸煜阳网络公司  时间:2020-04-28 09:55    
  建设网站布局中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;元素在主轴(页面)上居中排列