一文让你学会flex布局关于主轴、侧轴的布局方式

赵大宝子

已于 2022-10-21 23:22:52 修改

阅读量2.9k

点赞数 3

文章标签： css html 前端

于 2022-10-21 23:19:53 首次发布

本文链接：https://blog.csdn.net/m0_73920697/article/details/127455242

版权

flex布局
一、Flex布局/弹性布局：
Ø 是一种浏览器提倡的布局模型
Ø 布局网页更简单、灵活
Ø 避免浮动脱标的问题
二、 flex相关的属性
设置flex布局用display：flex必须将属性加给亲父级弹性容器(通俗点讲，弹性容器也就是亲父级元素-----必须是亲爹，爷爷都不行)
三、flex布局有两个轴一个叫主轴，一个叫侧轴
主轴也就是水平方向的轴
侧轴也就是垂直方向的轴
flex布局的轴向参考
在弄清楚轴向的前提下，就可以给主轴或者侧轴进行子集元素的安排了
1、主轴方向子集元素安放有以下属性=取值===这里也就是解释的主轴的对齐方式
属性：justfy-content:

附上几个取值相对运行的样式图
html中的盒子嵌套关系

<body>
  <div class="box">
    <div>1</div>
    <div>2</div>
    <div>3</div>
  </div>
</body>

取值：
flex-start 默认值, 起点开始依次排列

flex-start

flex-end 终点开始依次排列

center 沿主轴居中排列
flex-center

space-around 弹性盒子沿主轴均匀排列, 空白间距均分在弹性盒子两侧
space-around-弹性盒子两边的外间距一样大

space-between 弹性盒子沿主轴均匀排列, 空白间距均分在相邻盒子之间
space-between--弹性盒子的紧贴弹性容器，中间间距相同--也是在开发布局中用的最多的一种取值

space-evenly 弹性盒子沿主轴均匀排列, 弹性盒子与容器之间间距相等
space-evenly--弹性盒子的外间距平均分配

2、侧轴同样也有对齐方式。
属性：align-items

取值：flex-start 默认值, 起点开始依次排列

flex-end 终点开始依次排列

center 沿侧轴居中排列
center

stretch 默认值, 弹性盒子沿着主轴线被拉伸至铺满容器
stretch
/* 结论: Flex布局中,弹性盒子会在弹性容器中被拉伸或者被挤压
弹性盒子会随着弹性容器的变化而变化 /===没有设置高度
/ 在stretch效果中,弹性盒子会沿着侧轴被拉伸直到充满整个盒子
如果弹性盒子不被拉伸则是因为盒子设置了固定高度 /
/ 在stretch效果中,要出现拉伸的话要弹性盒子不给高度才能出现 /
/ 弹性盒子有固定的大小，盒子该多大，就是多大 /
/ 弹性盒子没有固定大小，弹性盒子就是内容大小，添加stretch取值会被拉伸 */

没有给高度
这里是没有弹性盒子高度拉伸
3、flex伸缩比===此属性要加给需要设置的弹性盒子的其中一个，加给设置属性的元素本身。
属性：flex
取值：数字=整数
注意：这里只是占据父级盒子剩余的部分

赵大宝子

关注

3
点赞
踩
7

收藏

觉得还不错? 一键收藏
3
评论
一文让你学会flex布局关于主轴、侧轴的布局方式

弹性盒子没有固定大小，弹性盒子就是内容大小，添加stretch取值会被拉伸 */space-between 弹性盒子沿主轴均匀排列, 空白间距均分在相邻盒子之间。space-around 弹性盒子沿主轴均匀排列, 空白间距均分在弹性盒子两侧。space-evenly 弹性盒子沿主轴均匀排列, 弹性盒子与容器之间间距相等。/* 结论: Flex布局中,弹性盒子会在弹性容器中被拉伸或者被挤压。在stretch效果中,弹性盒子会沿着侧轴被拉伸直到充满整个盒子。弹性盒子有固定的大小，盒子该多大，就是多大。
复制链接

扫一扫