flex一左一右分布,flex两行两列布局
css基础之flex布局
很多时候跟着书和不系统的视频学习,会发现没有方向,学了很多却不知道自己能够做出什么成绩。
学习要有一个清晰的职业学习规划,学习过程中会遇到很多问题,你可以到我们的web学习交流君羊- 点击此处 ,
同时准备了基础,进阶学习资料。学友都会在里面交流,分享一些学习的方法和需要注意的小细节,每天也会准时讲一些项目实战案例。
————————————————
1.什么是flex
flex 是 Flexible Box 的缩写,意为 弹性布局
flex布局中把一个元素作为容器,容器中的子元素称为项目
可以通过容器的flex属性,设置所有项目的排列样式。也可以通过项目的flex属性,设置指定项目的排列样式。
2.flex布局的方向
flex布局项目的排列方向可以有两个维度,一水平,二垂直
项目排列方向称为主轴,与主轴垂直的方向叫交叉轴
在每个轴上有两个方向,从左至右,从右到左;从上到下,从下到上。
2.1 flex水平布局
在水平维度,默认方向是从左至右
可以通过?flex-direction:row-reverse设置为从右到左排列
效果图:
1).默认方向,从左至右
2).反方向
2.2 垂直布局
效果图:
1).默认方向,从上到下
2).反方向
3. 容器内项目换行
通过flex-wrap属性,设置项目在容器内是否可以换行,默认不允许换行。
不换行的称为单行容器,换行的称为多行容器
也可以通过flex-flow属性同时设置容器主轴方向和是否换行(推荐使用)
效果图:
1).默认不允许换行,项目被压缩
2).允许换行,当剩余宽度不足容纳一个项目块时,就换行
相关知识:
css如何实现边框长度控制功能
详细介绍css中的数学表达式calc()
关于书籍:需要学习资料的小伙伴们可以加群, 点击此处
弹性盒子flex布局
弹性盒子布局
div style="display: flex;flex-direction:row;justify-content:space-between "
1.flex-direction属性
取值:row(默认) | row-reverse | column | column-reverse
用于控制项目排列方向与顺序,默认row,即横向排列,项目排列顺序为正序1-2-3;row-reverse同为横向排列,但项目顺序为倒序3-2-1。
column 与row相反,为纵向排列,项目顺序为正序1-2-3,column-reverse同为纵向排列,项目顺序为倒序3-2-1。
取值:nowrap(默认) | wrap | wrap-reverse
用于控制项目是否换行,nowrap表示不换行;
举个例子:比如容器宽度为300px,容器中有6个宽度为60px的项目,nowrap情况下,项目会强行等分容器宽度从而不换行,那么项目实际宽度也就只有50px了,而非我们自己设置的60px。
wrap表示换行,即项目不会等分容器宽度,而是根据自身宽度进行排列,如果超出父容器宽度则自然换行。
wrap-reverse同样表示换行,需要注意的是第一排会紧贴容器底部,而不是我们想象的项目6紧贴容器顶部,效果与wrap相反。
flex-flow属性是flex-deriction与flex-wrap属性的简写集合,默认属性为row nowrap,即横向排列,且不换行,如果需要控制项目排列与换行,推荐使用此属性,而非单独写两个。
4.justify-content属性
取值:flex-start(默认) | flex-end | center | space-between | space-around | space-evenly;
用于控制项目在横轴的对齐方式,默认flex-start即左对齐,center 为居中,对应的flex-end为右对齐。
space-between为左右两端对齐,即左右两侧项目都紧贴容器,且项目之间间距相等。
space-around为项目之间间距为左右两侧项目到容器间距的2倍,比较特别的布局,日常使用不太多。
space-evenly为项目之间间距与项目与容器间距相等,相当于除去项目宽度,平均分配了剩余宽度作为项目左右margin。
** 5.align-items属性**
取值:flex-start | flex-end | center | baseline | stretch(默认)
用于控制项目在纵轴排列方式,默认stretch即如果项目没设置高度,或高度为auto,则占满整个容器,下面第一张图的项目没设置高度,其余图片中均为60px。
flex-start会让项目在纵轴紧贴容器顶部,flex-end与之相反:
center使用最多,自然不会陌生,在纵轴中心位置排列:
baseline比较特殊,它让项目以第一行文字的基线为参照进行排列:
注意,常理来说justify-content与align-items默认分别处理项目横轴,纵轴的对齐方式,但如果我们修改了flex-direction为column,它们处理的轴向会交换,也就是justify-content处理纵轴,align-items处理横轴。
6.align-content
取值:flex-start | flex-end | center | space-between | space-around | space-evenly | stretch(默认);
用于控制多行项目的对齐方式,如果项目只有一行则不会起作用;默认stretch,即在项目没设置高度,或高度为auto情况下让项目填满整个容器,与align-items类似。注意,如下演示的12个项目我均没有设置高度。
flex-start ,center,flex-end 与align-items属性表现一致:
space-around与justify-content保持一致,即项目之间间距为上下两端项目与容器间距两倍。
space-evenly同理,项目之间间距与项目到容器之间间距相等,space-between为上下两侧项目紧贴容器。
align-content其实也有baseline等其它可用值,表现与上面介绍过的属性一致,只是单行项目或多行项目的区别。
介绍完容器属性,简单介绍下项目属性。容器属性是加在容器上的,那么项目属性呢,就是写在项目上的,就好比容器属性给ul,项目属性给li差不多一个意思。
1.order
取值:默认0,用于决定项目排列顺序,数值越小,项目排列越靠前。
2.flex-grow
取值:默认0,用于决定项目在有剩余空间的情况下是否放大,默认不放大;注意,即便设置了固定宽度,也会放大。
假设默认三个项目中前两个个项目都是0,最后一个是1,最后的项目会沾满剩余所有空间。
假设只有第一个项目默认为0,后面两个项目flex-grow均为1,那么后两个项目平分剩余空间。
假设第一个项目默认为0,第二个项目为flex-grow:2,最后一个项目为1,则第二个项目在放大时所占空间是最后项目的两倍。
3.flex-shrink
取值:默认1,用于决定项目在空间不足时是否缩小,默认项目都是1,即空间不足时大家一起等比缩小;注意,即便设置了固定宽度,也会缩小。
但如果某个项目flex-shrink设置为0,则即便空间不够,自身也不缩小。
上图中第二个项目flex-shrink为0,所以自身不会缩小。
4.flex-basis
取值:默认auto,用于设置项目宽度,默认auto时,项目会保持默认宽度,或者以width为自身的宽度,但如果设置了flex-basis,权重会width属性高,因此会覆盖widtn属性。
上图中先设置了flex-basis属性,后设置了width属性,但宽度依旧以flex-basis属性为准。
5.flex
取值:默认0 1 auto,flex属性是flex-grow,flex-shrink与flex-basis三个属性的简写,用于定义项目放大,缩小与宽度。
该属性有两个快捷键值,分别是auto(1 1 auto)等分放大缩小,与none(0 0 auto)不放大不缩小。
6.align-self
取值:auto(默认) | flex-start | flex-end | center | baseline | stretch,表示继承父容器的align-items属性。如果没父元素,则默认stretch。
用于让个别项目拥有与其它项目不同的对齐方式,各值的表现与父容器的align-items属性完全一致。
Flex语法——弹性布局
传统的布局,都是基于盒模型,display,float,position,有的时候感觉它做出来的界面缺少一些灵活性,这时候我们就可以使用Flex布局,是Flexible Box的缩写,意为"弹性布局",它可以让你界面有很大的灵活性。但是你得了解Flex的语法,好了,不多说了,直接上干货!!!
1. 主轴方向:左到右(默认) | 右到左 | 上到下 | 下到上
flex-direction: row | row-reverse | column | column-reverse
2. 换行:不换行(默认) | 换行 | 换行并第一行在下方
flex-wrap: nowrap | wrap | wrap-reverse
3.主轴方向和换行简写
flex-flow: flex-direction || flex-wrap
4.主轴对齐方式:左对齐(默认) | 右对齐 | 居中对齐 | 两端对齐 | 平均分布
justify-content: flex-start | flex-end | center | space-between | space-around
5.交叉轴对齐方式:顶部对齐 | 底部对齐 | 居中对齐 | 文本基线对齐 | 如果项目未设置高度或设为auto,将占满整个容器的高度。(默认)
align-items: flex-start | flex-end | center | baseline | stretch
6.多主轴对齐:顶部对齐 | 底部对齐 | 居中对齐 | 上下对齐并铺满 | 轴线占满整个交叉轴。(默认)
align-content: flex-start | flex-end | center | space-between | space-around | stretch
1. 排序:数值越小,越排前,默认为0
order: integer
2.放大:默认0(即如果有剩余空间也不放大,值为1则放大,2是1的双倍大小(约等),以此类推)
flex-grow: number; /* default 0 */
3.缩小:如果所有项目的flex-shrink属性都为1,当空间不足时,都将等比例缩小。如果一个项目的flex-shrink属性为0,其他项目都为1,则空间不足时,前者不缩小。
负值对该属性无效。)
flex-shrink: number; /* default 1 */
4.固定大小:默认为0,可以设置px值,也可以设置百分比大小
flex-basis: length | auto; /* default auto */
5.flex-grow, flex-shrink 和 flex-basis的简写,默认值为0 1 auto
flex: none | [ 'flex-grow' 'flex-shrink'? || 'flex-basis' ]
6.单独对齐方式:自动(默认) | 顶部对齐 | 底部对齐 | 居中对齐 | 文本基线对齐 | 上下对齐并铺满
align-self: auto | flex-start | flex-end | center | baseline | stretch
这写的很乱,我看着都乱凑合看吧!!!
flex的左右布局,右侧出现x轴滚动条
??????? flex的左右布局,左侧菜单宽度固定,右侧自适应。
?????? .main{width:100%;display:flex;}
?????? .left{flex 0 0 180px}
?????? .right{flex:1;}
???????? 在右侧内容中,包含element-ui的table组件,当table内容列很多,宽度超出flex布局得宽度,出现横向滚动条。
.right{flex:1; overflow:hidden }
这样就完美解决出现横向滚动条的问题了。
微信小程序flex布局
Flex布局:意为“弹性布局”,为盒模型提供巨大的灵活性
使用说明:
1. 任何容器都可以使用flex布局
??display: flex;
2.行内元素可以使用flex布局
??display: inline-flex;
外层flex容器的属性:
1.flex-direction属性
??flex-direction: row | row-reverse | column | column-reverse;
row(默认值):主轴为水平方向,起点在左端。
row-reverse:主轴为水平方向,起点在右端。
column:主轴为垂直方向,起点在上沿。
column-reverse:主轴为垂直方向,起点在下沿。
2.flex-wrap属性
?flex-wrap: nowrap | wrap | wrap-reverse;
nowrap (默认值) :不换行。
wrap:换行,第一行在上方。
wrap-reverse:换行,第一行在下方。
3. flex-flow属性:是flex-direction属性和flex-wrap属性的简写形式,默认值为row nowrap
flex-flow: flex-direction || flex-wrap;
4. justify-content属性:定义item在主轴上的对齐方式
justify-content: flex-start | flex-end | center | space-between | space-around;
flex-start(默认值):左对齐
flex-end:右对齐
center: 居中
space-between:两端对齐,项目之间的间隔都相等。
space-around:每个项目两侧的间隔相等。所以,项目之间的间隔比项目与边框的间隔大一倍。
5. align-items属性:定义项目在交叉轴上如何对齐
align-items: flex-start | flex-end | center | baseline | stretch;
flex-start:交叉轴的起点对齐。
flex-end:交叉轴的终点对齐。
center:交叉轴的中点对齐。
baseline: 项目的第一行文字的基线对齐。
stretch(默认值):如果项目未设置高度或设为auto,将占满整个容器的高度。
6. align-content属性:定义多跟轴线的对齐方式,如果只有一根轴线则不起作用
?align-content: flex-start | flex-end | center | space-between | space-around | stretch;
flex-start:与交叉轴的起点对齐。
flex-end:与交叉轴的终点对齐。
center:与交叉轴的中点对齐。
space-between:与交叉轴两端对齐,轴线之间的间隔平均分布。
space-around:每根轴线两侧的间隔都相等。所以,轴线之间的间隔比轴线与边框的间隔大一倍。
stretch(默认值):轴线占满整个交叉轴。
项目item的属性
1. order属性:定义项目的排列顺序,数值越小越靠前,默认值为0,负数在0前面
order: integer;
2. flex-grow属性:定义项目的放大比例,默认为0,即如果存在剩余空间,也不放大
?flex-grow: number; /* default 0 */
3. flex-shrink属性:定义项目缩小比例,默认是1,即如果空间不足,该item将缩小
?flex-shrink: number; /* default 1 */
4. flex-basis属性:在分配多余空间之前,item占据的主轴空间(main size),默认值auto,即item本身大小
flex-basis: length | auto; /* default auto */
5. flex属性:是flex-grow,flex-shrink,flex-basis的简写,默认值为0 1 auto,后面两个属性可选
?flex: none | [ 'flex-grow' 'flex-shrink'? || 'flex-basis' ]
该属性有两个快捷值:auto (1 1 auto) 和 none (0 0 auto)。
建议优先使用这个属性,而不是单独写三个分离的属性,因为浏览器会推算相关值。
6. align-self属性:允许单个item与其他item有不一样的对其方式,可覆盖align-items属性
align-self: auto | flex-start | flex-end | center | baseline | stretch;