码迷,mamicode.com
首页 > 其他好文 > 详细

对于flex布局的使用心得

时间:2019-11-09 23:58:26      阅读:190      评论:0      收藏:0      [点我收藏+]

标签:优点   imp   就会   置换   换行   flex   dir   cond   无法   

弹性盒子flex:

对于客户端的布局非常有用,不管是平均分配space-around这个属性还是两端对齐space-betwee在页面布局的时候都会有很好的表现。

对于部分内容区域中,具有很多大致内容相同的几个区块的布局都可以使用到它,将父级设置为display:flex;父级就会变成容器,子级就会变成项目,项目默认是在一行显示,如果项目的宽度总和大于父级的总和了,子级就会缩放在一行显示。

因此换行是需要自己设置的。我平时划分的区块是比较细的,因此用到换行的情况是内容相似而且比较多的。

换行的书写方式为:flex-wrap:wrap  默认值为nowrap。

当换行过后交叉轴就会变成多根,在一根交叉轴的对齐方式使用的是align-items,当使用了换行过后对应的交叉轴对齐方式属性应当书写为align-content。

在使用中遇到一个难以解决的问题,想做一个骰子五的样式,但是中间那个区块没法下去,代码如下:

html中代码如下:

<div class="father">
<div class="first"></div>
<div class="second"></div>
<div class="third"></div>
<div class="fourth"></div>
<div class="fifth"></div>
</div>
css中代码如下:
.father {
height: 320px;
width: 320px;
margin: 0 auto;
display: flex;
box-sizing: border-box;
border: solid 1px red;
justify-content: space-between;
flex-wrap: wrap;
align-content: space-between;
}
每个盒子我给了一个背景颜色,因为代码都是重复的就不写了。
.father>div {
width: 100px;
height: 100px;
}
.second {
align-self: center !important;
}
此问题我无法解决,但是因为平时的开发中也用不到这样的布局因此也没有特别去纠结。
对于属性flex-direction,可以改变主轴的对齐方式,可以从左到右,从右到左,也可以从上到下,从下到上。根据自己的需求也是挺好用的。
flex-direction与flex-wrap可以简写为flex-flow:既可以设置换行也可以设置主轴的对齐方式,可以写单个值也可以两个值一起写。
综上所述在之前的开发当中因为float浮动的使用非常麻烦因为每次设置了浮动过后都要清浮动,否则的话浮动元素不会计入常规流的计算,那么在下方的常规流内容区块就会往上顶,所以就非常的麻烦,因此flex的布局就体现出了非常方便的优点,比如我想让内容去正中间只需要两条语句即可,也不需要一点一点的调margin。
 

对于flex布局的使用心得

标签:优点   imp   就会   置换   换行   flex   dir   cond   无法   

原文地址:https://www.cnblogs.com/weijiangZ/p/11828046.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!