FlexBox 布局详解

incredible 发布于2019-08-29 12:42 / 490人阅读

摘要：很久没有写博客了，这里把之前学习布局的一篇笔记整理了一下。其在文档流中的直接子元素将成为。子元素在容器内排列的方向称为主轴，跟主轴垂直的方向称为辅轴。

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

flex 弹性布局
FlexBox 可控制子元素:

水平或垂直排成一行

控制子元素的对齐方式

控制子元素的高度／宽度

控制子元素的显示顺序

控制子元素是否折行

display:flex; 创建 Flexbox 元素
在 flex 布局中必须理解的概念就是区分主轴和辅轴(侧轴):

在项目中我们使用 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 |

默认: main-size: 主轴方向的宽度 (根据 flex-direction设置，水平排列时，设置的是宽度；垂直排列时，设置的高度)

flex-grow

定义每一个子元素在盒子内的弹性

拓展盒子剩余空间的能力(空间富余时)

取值:

取值:默认 0 ，整数小数都可

剩余空间的分配规则 : flex-basis + flow-grow/sum(flow-grow)*remain remain 表示多余的空间

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

flex-shrink

定义元素收缩的能力(空间不足时)

取值:

取值 : 默认 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

多行内容 设置在辅轴方向上，行的对齐方式

默认 stretch 拉伸

guowenfh
本文原地址： https://blog.guowenfh.com/201...

GPU云服务器云服务器 FlexBox详解 flexbox flexbox容器 div布局布局html

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/112080.html

CSS三栏布局——多种方法详解，比较兼容性

摘要：题目假设高度已知，请写出三栏布局，其中左栏右栏宽度各为，中间自适应三栏布局的种方案这是一道经典的面试题，下面记录了布局的种方法。题目:假设高度已知，请写出三栏布局，其中左栏、右栏宽度各为300px，中间自适应. 三栏布局的5种方案这是一道经典的面试题，下面记录了css布局的5种方法。三栏布局 * { margin: 0; ...

马忠志 2019-08-30 10:57 评论0 收藏0
FlexBox 布局详解

摘要：很久没有写博客了，这里把之前学习布局的一篇笔记整理了一下。其在文档流中的直接子元素将成为。子元素在容器内排列的方向称为主轴，跟主轴垂直的方向称为辅轴。很久没有写博客了，这里把之前学习 flex 布局的一篇笔记整理了一下。发布到博客上。赶一个五月的末班车吧。还是得坚持啊!! flex 弹性布局FlexBox 可控制子元素: 水平或垂直排成一行控制子元素的对齐方式控制子元素的高度／...

you_De 2019-08-01 16:57 评论0 收藏0
CSS及布局

摘要：经过半年的打磨，正式发布，主要是新增了一些常用组件，并使用命名，为接下来的微信小程序开发做好准备。这两种方式实现的瀑布流式布局均支持首屏和网页窗口大小改变时的列数自适应。主要是对于标准里的布局方式草案中的布局方式进行一些总结。一劳永逸的搞定 flex 布局寻根溯源话布局一切都始于这样一个问题：怎样通过 CSS 简单而优雅的实现水平、垂直同时居中。记得刚开始学习 CSS 的时候，看...

jaysun 2019-08-29 14:04 评论0 收藏0
前端-CSS3&H5

摘要：高度模型浅识为的简写，简称为块级格式化上下文，为浏览器渲染某一区域的机制，中只有和中还增加了和。并非所有的布局都会在开发中使用，但是其中也会涉及一些知识点。然而在不同的纯制作各种图形纯制作各种图形多图预警一劳永逸的搞定 flex 布局寻根溯源话布局一切都始于这样一个问题：怎样通过 CSS 简单而优雅的实现水平、垂直同时居中。记得刚开始学习 CSS 的时候，看到 float 属性不...

xiaolinbang 2019-08-29 14:14 评论0 收藏0