弹性Flex布局 深入理解，简单易懂-前端-E先生的博客
Java
MySQL
大数据
Python
前端
黑科技
大语言模型
    首页 >> 互联网 >> 前端

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

admin • 2021-12-31 02:45:43 • 前端 • 阅读578
[导读]：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属性。
 

本文来自E先生的博客，如若转载，请注明出处：https://javajz.cn

flex,弹性布局
打赏 微信扫一扫微信扫一扫
admin
flex布局实现左侧文字溢出省略右侧文字自适应布局
« 上一篇
vue 实现页面静态化. 已解决 不采用框架
下一篇 »

相关推荐

留言区

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

历史留言

鲁ICP备20021488号
欢迎加Easy的QQ