弹性布局

弹性布局
在制作网页的过程中,布局是我们最重要的一个环节,可以说布局的好坏直接影响到整个网页的成败,布局成,则事半功倍,布局败,则事倍功半。随着移动互联的到来,响应式网站风靡。这也就兴起了一种新的布局方式——弹性布局。取代我们之前“display+float+position”的布局方式,采取全新的弹性布局,会让你的网站如丝绸般顺滑!
弹性布局(Flex布局):display:fixed(2009年推出)
弹性布局的优点:可以解决复杂的问题,缺点是IE不兼容
注意:改变的是父元素的布局方式,由默认的流式布局改变成弹性布局;
基本概念:1.容器 2.项目
1.容器:在这里指的是需要添加弹性布局的【父元素】
2.项目:弹性布局容器中的每一个子元素,称之为项目;
基本方向:1.主轴 2.交叉轴
1.主轴:默认为盒子水平方向,可以通过属性改变主轴方向
2.交叉轴:与主轴垂直的就是交叉轴;
小结:【弹性布局】改变的是【容器内部】的布局方式
从流式布局改变成弹性布局
布局方式的规律是沿着【主轴起始方向】排列,在【主轴方向】有不同的对齐方式;
当容器中的流发生变化时,子元素也会受到影响;由块元素变成行内块;

display:flex 的十二个属性
6个作用于父容器,6个作用于子项目
作用于父容器的6个属性:
1.flex-direction属性:决定主轴的方向
row(默认值):主轴为水平方向,起点在左端
row-reverse:追轴在水平方向,起点在右端
column:主轴为垂直方向,起点在上沿;
column-reverse:主轴为垂直方向,起点在下沿

2.flex-wrap属性:定义:如果一条轴线排不下,是否换行,如何换行
nowrap:(默认值)不换行,当容器宽度不够时,每个项目会被挤压宽度;
wrap:换行,并且第一行在容器最上方;
wrap-reverse:换行,并且第一行在容器最下方;
3.flex-flow :
是【flex-direction和flex-wrap】的缩写形式,默认值是:flex-flow:row wrap;
4.justify-content属性:定义:项目在主轴上的对齐方式
(此属性与主轴方向息息相关)
主轴方向:row-起点在左边,row-reverse-起点在左边,column-起点在上边,column-reverse-起点在下边
flex-start(默认值):项目位于主轴起点
flex-end:项目位于主轴终点
center:居中
space-between:两端对齐,项目之间的间距都相等。(开头和最后的项目,与父容器边缘没有间隔)
space-around:每个项目两侧的间隔相等。所以项目之间的间隔比项目与边框的间隔大一倍。(开头和最后的项目,与父容器边缘有一定的间隔);
5.align-items属性:定义:项目在交叉轴上如何对齐
flex-start:交叉轴的起点对齐;
flex-end:交叉轴的终点对齐;
center:交叉轴的中点对齐;
baseline:项目的第一行文字的基线对齐。(文字的行高,字体大小会影响美航的基线)
stretch(默认值):如果项目未设置高度或设为 【auto】,将占满整个容器的高度。
6.align-content属性:定义:多跟轴线的对齐方式。如果项目只有一根轴线,该属性不起作用。
(当项目换为多行时,可使用align-content取代align-items)
flex-start:与交叉轴的起点对齐;
flex-end:与交叉轴的终点对齐;
center:与交叉轴的中点对齐;
space-between:与交叉轴两端对齐,轴线之间的间隔平均分布。
space-around:每根轴线两侧的间隔都相等。所以,轴线之间的间隔比轴线与边框的间隔大一倍。
stretch(默认值):轴线占满整个交叉轴;

2.作用于子项目中的6大属性
1.order属性:定义:项目中的排列顺序。数值越小,排列越靠前。默认值为0;
2.flex-grow属性:定义:项目的放大比例。默认值是0;即如果存在剩余空间,也不放大;
3.flex-shrink属性:定义:项目的缩小比例,默认值是1,即如果空间不足,该项目将缩小;
4.flex-basis定义:项目占据的株洲空间。(如果主轴方向为水平方向,则设置这个属性,相当于设置项目的宽度。原来的【width】将会失效);
5.flex属性是flex-grow,flex-shrink和flex-basis的简写,默认值是0,1,auto。然后两个属性可选。
6.align-self:定义:单个项目自身在交叉轴上的排列方式,可以覆盖掉容器上的align-items属性;
属性值:与align相同,默认值为auto,表示继承父元素容器的align-items属性值;

  • 4
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值