FlexBox 布局详解

内容简介：FlexBox 布局详解

很久没有写博客了，这里把之前学习 flex 布局的一篇笔记整理了一下。发布到博客上。赶一个五月的末班车吧。还是得坚持啊!!

flex 弹性布局

FlexBox 可控制子元素:

• 水平或垂直排成一行
• 控制子元素的对齐方式
• 控制子元素的高度／宽度
• 控制子元素的显示顺序
• 控制子元素是否折行

在项目中我们使用 display:flex; 创建 Flexbox 元素，那么该元素就成为了一个 flex container ( 弹性的容器)。

其在 文档流中的直接子元素 将成为 flex item 。

flex item 子元素 在容器内 排列的方向称为 主轴 ，跟主轴垂直的方向称为 辅轴 。

方向相关属性

flex-direction

• 设置子元素排列方向 (其实也就是主轴的排列方向)
• 取值 row | row-reverse | column | column-reverse
• 默认 row :

flex-wrap

• 元素在主轴方向排放时，能否换行
• 取值: nowrap | wrap | wrap-reverse
• 默认 nowrap ，不换行

/*base css*/
.container{
    width: 400px;
    margin: 20px;
    line-height: 40px;
    font-size: 20px;
    color: #fff;
    display:flex;
}

.item{
    margin: 10px;
    width: 100px;
    line-height: 40px;
    text-align: center;
}

合并属性: flex-flow ， 上面两个属性的缩写

• <'flex-direction'> || <'flex-wrap'>
• 默认: flex-flow: row nowrap;

这里直接结合两个属性看就好。

order

• 指定摆放时的顺序，从小到大
• 取值:默认 0 ，(支持负值和正值)

弹性相关属性，都是设置在子元素上的

flex-basis

• 设置 flex item 的初始宽／高
• 取值: main-size | <width>
• 默认: main-size : 主轴方向的宽度 (根据 flex-direction 设置，水平排列时，设置的是宽度；垂直排列时，设置的高度)

flex-grow

• 定义每一个子元素在盒子内的弹性
• 拓展盒子剩余空间的能力 (空间富余时)
• 取值: <number>
• 取值:默认 0 ，整数小数都可
• 剩余空间的分配规则 : flex-basis + flow-grow/sum(flow-grow)*remain remain 表示多余的空间

这里可以看到 只设置 flex-basis 相当与设置元素的 width

flex-shrink

• 定义元素收缩的能力 (空间不足时)
• 取值: <number>
• 取值 : 默认 1 ，平方(值为 0 时，不收缩)
• 不足空间收缩的规则 : flex-basis + flow-grow/sum(flow-grow)*remain remain 表示不足的空间 (负值)

合并属性: flex

• <'flex-grow'> || <'flex-shrink'> || <'flex-basis'>
• 默认: flex: 0 1 main-size; 看上面

对齐 相关的属性

justify-content

• 设置子元素在主轴方向上的对其方式
• 取值: flex-start | flex-end | center | space-between | space-around
• 默认 flex-start

align-items

• 设置在辅轴上的对齐方式。
• 取值: flex-start | flex-end | center | baseline | stretch
• 默认 stretch

align-self 设置在子元素上

• 单独设置子元素在辅轴方向的对齐方式
• 取值: flex-start | flex-end | center | baseline | stretch
• 默认 stretch

align-content

• 多行内容 设置在辅轴方向上，行的对齐方式
• • 取值: flex-start | flex-end | center | space-between | space-around | stretch
• 默认 stretch 拉伸

以上所述就是小编给大家介绍的《FlexBox 布局详解》，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持！

查看所有标签

猜你喜欢:

• Flutter布局篇（1）--水平和垂直布局详解
• FlexBox 布局详解
• Android FlexboxLayout 布局详解
• Flutter 完整开发实战详解（十六、详解自定义布局实战）
• 图文详解 Java 对象内存布局
• Flutter Container Widget 布局详解

本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。