弹性Flex布局 深入理解,简单易懂-前端-阿习进阶博客
Java
MySQL
大数据
Python
前端
黑科技
    首页 >> 互联网 >> 前端

弹性Flex布局 深入理解,简单易懂

[导读]:Flex是Flexible Box的缩写,翻译成中文就是弹性盒子,用来为盒装模型提供最大的灵活性。任何一个容器都可以指定为Flex布局。 容器默认存在两根主轴:水平方向主轴(main axis)和垂直方向交叉轴(cross axis),默认项目按主轴排列。 mai...
Flex是Flexible Box的缩写,翻译成中文就是“弹性盒子”,用来为盒装模型提供最大的灵活性。任何一个容器都可以指定为Flex布局。
 
容器默认存在两根主轴:水平方向主轴(main axis)和垂直方向交叉轴(cross axis),默认项目按主轴排列。
 
main start/main end:主轴开始位置/结束位置;
cross start/cross end:交叉轴开始位置/结束位置;
main size/cross size:单个项目占据主轴/交叉轴的空间;
设置在容器上的属性有6种。
 
flex-direction
flex-wrap
flex-flow
justify-content
align-item
align-content
flex-direction:决定主轴的方向
 
row(默认):主轴水平方向,起点在左端;
row-reverse:主轴水平方向,起点在右端;
column:主轴垂直方向,起点在上边沿;
column-reserve:主轴垂直方向,起点在下边沿。
 
flex-wrap属性:定义换行情况
flex-wrap属性:设置是否换行和换行情况
 
有的时候,项目都排列在一条轴线上,但有可能一条轴线排不下。
 
 
 
 
   
1
   
2
   
3
   
4
 
 
flex-flow属性:flex-direction和flex-wrap的简写
 
 
justify-content属性:定义项目在主轴上的对齐方式。
 
align-content属性:定义多根轴线的对齐方式
align-content属性设置的前提:容器必须设置flex-wrap:··
 
如果项目只有一根轴线,该属性不起作用。
所以,容器必须设置flex-wrap:···;
 
 
子对象的设置
设置在项目上的属性也有6个。
 
order:order属性定义项目的排列顺序。数值越小,排列越靠前,默认为0。
 
flex-grow:该属性是指当子元素总宽度和比盒子宽度小的时候,子元素该如何瓜分父元素剩余宽度。
 
flex-shrink:当子元素总宽度和比盒子宽度大的时候,子元素该如何压缩自己适应父元素宽度。
 
flex-basis:指定了 flex 元素在主轴方向上的初始大小
 
flex:flex属性是flex-grow, flex-shrink 和 flex-basis的简写,默认值为0 1 auto
 
align-self:align-self属性允许单个项目有与其他项目不一样的对齐方式,可覆盖align-items属性。
 

本文来自阿习进阶博客,如若转载,请注明出处:https://yanxias.com

留言区

联系人:
手   机:
内   容:
验证码:

历史留言

联系人:阿习

手机号:156****7890

留言内容:欢迎大家一起讨论文章,有喜欢发帖的可以私聊我给你开权限,发文章

留言时间:2022-05-09 17:46:15

回复内容:互联网阿习

回复时间:2022-05-09 17:46:15

用户IP:220.***.***.232

用户操作系统:Windows 10

欢迎加Easy的QQ