Flex布局详解

本文详细介绍了Flex布局的关键属性,包括flex-direction、flex-wrap、flex-flow、justify-content、align-items和align-content,解析了它们在主轴和交叉轴上的对齐方式,帮助开发者更好地理解和使用Flex布局进行网页设计。
摘要由CSDN通过智能技术生成

flex 是 Flexible Box 的缩写,就是弹性盒子布局的意思

flex的属性设置包括:

flex-direction   主轴方向
flex-wrap        主轴一行满了换行
flex-flow        1和2的组合
justify-content  主轴元素对齐方式
align-items      交叉轴元素对齐方式//单行
align-content    交叉轴行对齐方式//多行

1.flex-direction 主轴方向

row(默认值):主轴为水平方向,起点在左端。
row-reverse:主轴为水平方向,起点在右端。
column:主轴为垂直方向,起点在上沿。
column-reverse:主轴为垂直方向,起点在下沿。

image-20210331195635185

image-20210331195724739

image-20210331195803337

image-20210331195911522

2. flex-wrap 主轴一行满了换行

nowrap (默认值) 不换行压缩宽度
wrap    换行
wrap-reverses 反向换行

image-20210331200420335

3. flex-flow 1和2的组合

flex-low: [flex-direction] [flex-wrap]

就是 1 和 2 的组合,简写,同上,这里不赘述。

4.justify-content 主轴元素对齐方式

这里是元素的对齐,区别于刚刚的「方向」

flex-start (默认)靠着main-start对齐//参考常见术语(一般是左方向)
flex-end   靠着main-end对齐//参考常见术语(一般是右方向)
center     靠着主轴居中对齐//一般就是居中对齐
space-between 两端对齐,靠着容器壁,剩余空间平分
space-around  分散对齐,不靠着容器壁,剩余空间在每个项目二侧平均分配
space-evenly  平均对齐,不靠着容器壁,剩余空间平分

5.align-items item「项目」在交叉轴上对齐方式「单轴」

这个是 container 容器的属性,设置的是 items 项目元素在交叉轴上对齐样式

flex-start:交叉轴的起点对齐。
flex-end:交叉轴的终点对齐。
center:交叉轴的中点对齐。
baseline: 项目的第一行文字的基线对齐。
stretch(默认值)伸展:如果项目未设置高度或设为auto,将占满整个容器的高度。

6. align-content 交叉轴行对齐方式 多行

这个和 justify-content 属性一模一样,

justify-conent,align-items,align-content 都极度相似.

flex-start (每一行)(默认)靠着cross-start对齐//参考常见术语(一般是左方向)
flex-end   (每一行)靠着cross-end对齐//参考常见术语(一般是右方向)
center     (每一行)靠着cross线居中对齐//一般就是居中对齐
space-between (每一行)两端对齐,靠着容器上下壁,剩余空间平分
space-around  (每一行)分散对齐,不靠着容器壁,剩余空间在每个项目二侧平均分配
strentch      (每一行)伸缩,占满整个高度


原文链接:Flex布局详解_邓嘉文Jarvan的博客-CSDN博客_flex布局

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值