前言
弹性盒子，顾名思义：它是具有弹性功能的，在Web网页中，你所看见的内容，不会随着网页宽度的变化而打乱了排版。今天以一种非常白话的方式和大家谈一谈我对Flex box 的认识。
Flex box 中属性作用的对象
- 父级元素
-
直接的子元素
这里我强调了，是直接的子元素,假设我们html代码如下
<nav>
<ul class="wrap-items">
<li class="first"><a href="javascript:;">Home</a></li>
<li><a href="javascript:;">About</a></li>
</ul>
</nav>
Css代码为:
.wrap-items{
width: 100%;
height: 200px;
background-color: lightgray;
display: flex;
}
.wrap-items>li{
width: 100px;
height:80px;
background-color: #888;
text-align: center;
line-height: 80px;
}
-
ul和li为直接的父子关系，属性display:flex写在ul中,可以work -
nav和li是祖辈之间的关系 ,属性写在nav中这里就不会work
生效效果图:
Paste_Image.png
Flex 有哪些属性？
- display
- flex-direction
- flex-wrap
- justify-content
- align-items
- align-content
- order
- align-self
- flex
介绍了Flex box作用对象，和它的属性，接着我们就按作用对象给属性给分类
属性分类
写在父元素上上的：
- display
- flex-direction
- flex-wrap
- align-content
- justify-content
- align-items
剩下的就是写在子元素上的咯：
- order
- align-self
- flex
我对这些属性的理解是什么呢？
- display ： flex 指定我要用弹性盒子的属性.默认就是水平排序了
- flex-direction ： 指定排列的方向，默认水平
- flex-wrap ： 超过自身宽度，是否换行，默认换行
- justify-content ： 水平方向上对齐
- align-items ： 垂直方向上对齐
- align-content ： 针对- flex-warp 属性发生换行，具有的排列方式
- order ： 改变某个元素的相对位置或者说顺序
- align-self ： 针对某个元素定义垂直对其方式
- flex ：针对某个元素按比例定义自身大小
每个属性的身上又有哪些值呢？
- display ： flex ；说弹性盒子，这个值肯定是唯一的
行还是列
- flex-direction ：row | column | row-reverse | ；其实在我理解也就是按行排或者按列排
flex-direction：row；默认就是按行排（所以可以不写）
Paste_Image.png
flex-direction：column
Paste_Image.png
换行吗？
- flex-wrap ：nowrap | wrap ； 换行或者不换行咯（超过自身width）
flex-wrap：wrap；父级元素小于子元素的宽度之和，就会发生换行，否则不换行
Paste_Image.png
flex-wrap：nowrap；因为自身宽度不够，又因为弹性的作用，让他们挤在一起
Paste_Image.png
水平对齐方式
- justify-content ： flex-start | flex-end | center | space-between | space around ；左对齐，右对齐，中心对其，等分对其，....
justify-content：flex-end；默认的 flex-start 就不截图了.
Paste_Image.png
justify-content：center ;
Paste_Image.png
justify-content：space-betwen ;
Paste_Image.png
justify-content：space-around;左右间距加起来等于中间的某个间距
Paste_Image.png
垂直对齐方式
- align-items ：flex-start | flex-end | center | baseline | stretch
- align-items ：flex-end；默认的flex-start ，不截图了
Paste_Image.png
align-items：center;
Paste_Image.png
flex-wrap 发生换行，我就可以发生效果了（垂直方向上的效果）
- align-content: flex-start | flex-end | center | space-between | space-around | stretch
align-content：flex-start;
Paste_Image.png
align-content：flex-end;
Paste_Image.png
align-content：center;
Paste_Image.png
align-content：space-between;
Paste_Image.png
align-content：space-around;
Paste_Image.png
在我身体里，我想控制谁就控制谁
- align-self：flex-start | flex-end | center | baseline | stretch
这里对4个子元素，分别应用了不同的属性值
Paste_Image.png
我的大小你做主
flex:按比例写 (1:1:1:1)比例值，分别写进对应的元素中.
这里 的比例为1：2：1：2 .从分配的宽度就可以看出
Paste_Image.png
flex:具体值，没什么意义，可以直接定义宽度
flex:具体值+比例值
Home :分配了200px;
其余的比例都是1；
Paste_Image.png
tips ：
- 可以嵌套写 display：flex；
- 可以结合定位使用哦，但position不要和flex 放在同一个元素里哦
扯了这么多，竟然有点饿了，我先撤退了咯。bye，bye！
希望大家能够监督我，提醒或者鼓励我能够养成坚持写文章的习惯。
如有错误或者疑问，请及时私聊我哦！
网友评论