Flex 弹性布局——笔记

最新推荐文章于 2024-06-05 19:48:12 发布

weixin_30412167

最新推荐文章于 2024-06-05 19:48:12 发布

阅读量90

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/lancelee98/p/9428853.html

本文详细介绍了Flex布局的基础概念，包括容器属性如display、flex-direction、flex-wrap等，以及项目属性如order、flex-grow、align-self等，并通过实例展示了如何使用这些属性来实现不同的布局效果。

将容器指定为Flex布局

display:flex    ——>d-flex
display:-webkit-flex /*Safari*/

*float clear vertical-align失效

行内元素

display:inline-flex    ->d-inline-flex ||.d-sm-flex

六个容器上的属性

*flex-direction 项目排列方向
*flex-wrap    换行方式
*flex-flow 上面两个的缩写
*justify-content 横向对齐方式
*align-items 单行的垂直对齐方式
*align-content 多行的对齐方式

flex-direction 决定项目的排列方向

*row 从左向右    ->flex-row    
*row-reverse 从右向左    ->flex-row-reverse
*column 从上到下    ->flex-column
*column-reverse 从下到上 ->flex-column-reverse

当为竖向对齐时   下margin自动 ->mb-auto
<div class="d-flex align-items-start flex-column" style="height: 200px;">
<div class="mb-auto p-2">Flex item</div>
<div class="p-2">Flex item</div>
<div class="p-2">Flex item</div>
</div>

上margin自动 -> mt-auto

flex-wrap 换行方式

*nowrap 不换行     ->flex-nowrap
*wrap 顺序换行    ->flex-wrap
*wrap-reverse 换行之后的在上方

flex-flow 上面两个的缩写

justify-content 横向对齐方式

*flex-start 左对齐    ->justify-content-start
*flex-end    右对齐    ->justify-content-end
*center 居中    ->justify-content-center
*space-between 两端对齐 项目间隔相等    ->justify-content-between
*space-around 两端留出空白 项目之间的间隔比两端的空白大一倍    justify-content-around
*当justify-content为默认左对齐时 可以使用自动margin
*mr-auto 自动将右margin填满 将自身右边的元素挤到旁边去

<div class="d-flex">
<div class="mr-auto p-2">Flex item</div>
<div class="p-2">Flex item</div>
<div class="p-2">Flex item</div>
</div>

*ml-auto

align-items 垂直对齐方式

*stretch 占满容器        ->align-items-stretch
*flex-start 上方对齐
*flex-end 下方对齐
*center 居中对齐
*baseline 第一行文字对齐

align-content

*stretch 轴线占满真个交叉轴
*flex-start 交叉轴的起点     -> align-content-start
*flex-start 交叉轴的终点
*center 交叉轴的中点
*space-between 交叉轴的两端对齐 轴线间隔平均分布    
*space-around 两端留出空白 项目之间的间隔比两端的空白大一倍

六个项目上的属性

*order    排列顺序
*flex-grow 放大比例
*flex-shrink 缩小比例
*flex-basis 横向空间
*flex 上面三个简称
*align-self  垂直对齐的属性

order 项目的排列顺序

*默认为0 数值越大 越往后排 ->order-3

flex-grow 项目放大比例

*默认为零 
*2比1 的空间大一倍

flex-shrink 缩小比例

默认为1 空间不足会缩小
0 空间不足不会缩小

flex-basis 项目占据横向的空间

*auto
*length 长度 多少px

flex 上面三个的简称

*0 1 auto
*auto (1 1 auto)
*none (0 0 auto)

align-self 单个元素垂直对齐的属性

可继承align-items    
单独设置时 单独生效
*stretch 占满容器    align-self-stretch
*flex-start 上方对齐
*flex-end 下方对齐
*center 居中对齐
*baseline 第一行文字对齐

转载于:https://www.cnblogs.com/lancelee98/p/9428853.html