title: flex布局
date: 2017-07-07 14:13:33
tags: css笔记
flexbox是什么
即使不知道视窗大小或者未知元素情况之下都可以智能的、灵活的调整和分配元素和空间两者之间的关系。简单的理解,就是可以自动调整,计算元素在容器空间中的大小。
使用flexbox
要开始使用flexbox,必须先让父元素变成一个flex容器,而此时子元素就变成了flex项目。
可以在父元素中设置display:flex
或者display:inline-flex
。这样一个flexbox格式上下文就启动了。
html结构
<ul> <!--parent element-->
<li></li> <!--first child element-->
<li></li> <!--second child element-->
<li></li> <!--third child element-->
</ul>
css样式
ul {
display: flex;
border: 1px solid pink;
}
li {
list-style: none;
width: 100px;
height: 100px;
background-color: #8cacea;
margin: 8px;
}
flex容器属性
flex-direction || flex-wrap || flex-flow || justify-content || align-items || align-content
当父元素设置为一个flex容器后,这几个属性可以直接使用在flex容器上。
flex-direction
flex-direction
属性控制flex项目沿着主轴(Main Axis)的排列方向。
这个属性具有四个值,分别是水平、垂直、水平反向、垂直反向
row(默认) || column || row-reverse || column-reverse
简单来说就是flex-direction
属性让你决定flex项目如何排列,其实水平和垂直在flex中不是方向概念,它们常常被称为主轴(Main-Axis)和侧轴(Cross-Axis)
如果把flex-direction
属性改为column
,这时flex项目将沿着Cross-Axis从上到下垂直排列。
html结构
<ul> <!--parent element-->
<li></li> <!--first child element-->
<li></li> <!--second child element-->
<li></li> <!--third child element-->
</ul>
css样式
ul {
display: flex;
flex-direction: column;
border: 1px solid pink;
}
li {
list-style: none;
width: 100px;
height: 100px;
background-color: #8cacea;
margin: 8px;
}
在
flex-direction
改变方向后,实际上是改变的Main-Axis和Cross-Axis两个轴的方向,如果设置flex-direction: column;
,那么实际上就是Main-Axis和Cross-Axis调换了位置。这将会影响之后基于Main-Axis和Cross-Axis的所有flex属性的设置。
flex-wrap
flex-wrap
属性有三个属性值,分别是换行、不换行、反向换行
wrap || nowrap(默认) || wrap-reverse
flex的默认行为会在一行内容纳所有的flex项目,即使浏览器出现滚动条(当flex项目的总体宽度大于浏览器窗口宽度)。默认是不换行的。
当flex项目过多时,也不会换行,所以每个项目会被压缩。而且如果flex项目元素内有类似文字等内容会撑开flex项目,那么浏览器就会出现滚动条。
如果希望flex容器在其flex项目达到一定数量能换行,将flex-wrap
设置为wrap
即可。当一行再不能包含所有列表项的默认宽度,就会多行排列。
除此之外,还有一个值wrap-reverse
。它让flex项目在容器中多行排列,只是方向是相反的。
flex-flow
flex-flow
是flex-direction
和flex-wrap
两个属性的连写属性。
就好比
border: 1px solid red
的概念
flex-flow: row wrap
相当于flex-direction: row; flex-wrap: wrap;
的写法。
justify-content
justify-content
属性主要定义了flex项目在Main-Axis上的对齐方式,有五个值可选:
flex-start(默认) || flex-end || center || space-between || space-around
justify-content: flex-start;
是让所有flex项目靠Main-Axis开始边缘(左对齐),也就是默认。
justify-content: flex-end;
是让所有flex项目靠Main-Axis结束边缘(右对齐)。
justify-content: center;
让所有flex项目排在Main-Axis的中间(居中)
justify-content: space-between;
让除了第一个和最后一个flex项目的两者间间距相同(两端对齐)
justify-content: space-around;
让每个flex项目具有相同的空间,相当于是给每个flex项目相同的margin-left
和margin-right
align-items
align-items
属性类似于justify-content
属性,主要是控制flex项目在Cross-Axis对齐方式,有五个可选值:
flex-start || flex-end || center || stretch(默认) || baseline
align-items: stretch;
在没有设置flex高度的情况下,让所有的flex项目高度和flex容器高度一样。
align-items: flex-start;
让所有flex项目靠Cross-Axis开始边缘(顶部对齐)
align-items: flex-end;
让所有flex项目靠Cross-Axis结束边缘(底部对齐)
align-items: center;
让flex项目在Cross-Axis中间(居中对齐)
align-items: baseline;
让所有flex项目在Cross-Axis上沿着他们自己的基线对齐
align-content
align-content
必须用于多行的flex容器,也是用来控制flex项目在flex容器里的排列方式,效果和align-items
相似,可选五个值:
flex-start || flex-end || center || stretch(默认)
align-content: stretch;
会拉伸flex项目,让他们沿着Cross-Axis适用flex容器可用的空间。
align-content: flex-start;
让多行flex项目靠Cross-Axis开始边缘。
align-content: flex-end;
让多行flex项目靠Cross-Axis结束位置
align-content: center;
让多行flex项目在Cross-Axis中间
flex项目属性
order || flex-grow || flex-shrink || flex-basis
order
允许flex项目在一个flex容器中重新排序,基本上可以改变flex项目的顺序从一个位置移到另一个地方。
这也意味着flex项目的位置改变在html中不需要改变源代码。
order
的默认值是0,也可以接收一个正值或一个负值。数值越大的flex项目排序越往后,如果两个以上flex项目有相同的order
值,flex项目重新排序是基于html源文件的位置进行排序
<ul>
<li style="font-size:24px;">列表项1</li>
<li style="font-size:24px;">列表项2</li>
<li style="font-size:24px;">列表项3</li>
<li style="font-size:24px;">列表项4</li>
<li style="font-size:24px;">列表项5</li>
</ul>
li:nth-child(1) {
order: 2;
}
li:nth-child(2) {
order: 1;
}
li:nth-child(3) {
order: 3;
}
li:nth-child(4) {
order: 3;
}
flex-grow和flex-shrink
flex-grow
属性控制flex项目在容器有多余的控件如何放大。默认值0。
flex-shrink
属性控制flex项目在容器没有额外空间又如何缩小。默认值1。
取值范围是0或者大于0的任何正数值,这个数值是设置flex项目在容器中所占比。
首先来看flex-grow: 0;
的效果
flex容器有多余的空间,这时将flex-grow: 1;
即可让flex忽略自己本身的宽度,平均分配flex内部的空间,通过这个数值也可以改变每个flex项目所占空间的占比。
而flex-shrink
属性和flex-grow
属性是相反的,现在设置flex-shrink: 0;
看一下。
如果像是这样flex项目的宽度多出了flex容器,那么就需要将flex-shrink: 1;
,这样会压缩flex项目的宽度,让其平均分配flex容器的空间,数值也是flex的占比。
flex-basis
flex-basis
属性可以指定flex项目的初始大小,也就是在flex-grow
和flex-shrink
调整之前的大小。
flex-basis
默认值是auto
,可以取任何用于width属性的值,比如% || em || rem || px
等等。但是如果要设置为0的话也要带有单位,flex-basis: 0;
这种写法是错误的。
flex-basis: auto;
这是默认情况flex项目的宽度。
可以看出flex项目的宽度就是由内容撑开,而使用flex-basis: 150px;
这样flex的宽度就被设置为了固定的150px;
flex连写
flex
是flex-grow
、flex-shrink
、flex-basis
三个属性的连写。
flex: 0 1 auto;
相当于flex-grow: 0; flex-shrink: 1; flex-basis: auto;
align-self
align-self
可以改变一个弹性项目沿着侧轴的位置,而不影响相邻的弹性项目。该属性的可选值为:
auto(默认) || flex-start || flex-end || center || baseline || stretch。
align-self: flex-end;
、align-self: center;
、align-self: flex-start;
三个值的效果。
align-self: stretch;
会将目标flex项目拉伸,以沿着Cross-Axis填满flex容器的可用空间。
align-self:baseline;
将目标flex项目沿着基线对齐,在这里效果和flex-start
效果相同。
最后一个是align-self: auto;
是将目标flex项目的值设置为父元素的align-items
的值,或者如果该元素没有父元素的话,就设置为stretch
。
相对和绝对flex项目
相对和绝对flex项目主要区别在于间距和如何计算间距,相对flex项目内的间距是根据它的内容大小来计算的,而在觉得flex项目中,只根据flex属性来计算。
先来看相对flex,flex项目设置flex: auto
,这个设置和flex: 1 1 auto;
是相同的,这样flex项目就是基于其包含内容的大小而计算的。下面的图中每个flex项目的内容不同,其占的宽度也不相同。
下面来设置成绝对的flex项目,flex: 1;
这个设置和flex: 1 1 0;
效果是一样的。flex-basis: 0;
的情况下,flex项目会基于flex-grow
来计算自己的空间,而flex-grow: 1;
,所以每个flex所占空间相同。
从上面可以得出结论,绝对flex项目的宽度只基于flex属性,相对flex的宽度基于内容的大小。