Flex布局

FingerLiu 发布于2019-08-30 15:52 / 1654人阅读

摘要：布局布局，，即弹性布局。指定布局行内元素内核的浏览器，必须加上前缀设置布局之后，子元素的和属性将失效容器容器，采用布局的元素它的所有子元素自动成为，称为项目。

Flex布局

Flex布局，Flexiable box，即弹性布局。
指定Flex布局

.box {
    display: flex;
}

行内元素

.inline-box {
    display: inline-flex;
}

Webkit内核的浏览器，必须加上-webkit前缀

设置flex布局之后，子元素的float、clear和vertical-align属性将失效

Flex容器

Flex容器，采用Flex布局的元素；它的所有子元素自动成为Flex item，称为Flex项目。
容器轴：main axis（主轴），across axis（交叉轴）
主轴开始位置（与边框的交叉点）main start，结束位置main end

容器的属性

容器的六个属性：

flex-direction

flex-wrap

flex-flow

justify-content

align-items

align-content

flex-direction属性

主轴的方向，可能的值：

row（默认）：水平方向，从左到右

row-reverse：水平方向，从右到左

column：垂直方向，从上到下

column-reverse：垂直方向，从下到上

flex-wrap属性

如果一条轴线排不下，如何处理：

nowrap（默认）：不换行

wrap：换行，第一行在上面

wrap-reverse：换行，第一行在下面

justify-content属性

flex item在main axis上的对齐方式：

flex-start（默认值）：左对齐

flex-end：右对齐

center：居中

space-between：两端对齐，item之间间隔相等

space-around：每个item两侧间隔相等

align-items属性

项目在交叉轴上如何对齐

flex-start：cross轴起点位置

flex-end: cross轴终点位置

center： cross轴终点对齐

baseline：item的第一行文字的基线对齐

stretch（默认值）：如果项目没有设置高度或设为auto，将占满容器的高度

align-content属性

多根轴线的对齐方式，只有出现多轴的情况下才有效

flex-start：与cross axis的起点对齐

flex-end：与cross axis的终点对齐

center：终点对齐

space-between：两端对齐，间隔平均分布

space-around：轴线两侧的间隔相等

stretch（默认值）：轴线占满整个cross axis

Flex项目

flex item上的属性

order

flex-grow

flex-shrink

flex-basis

flex

align-self

order属性

定义项目的排列顺序，排列越小越靠前，默认为0

flex-grow属性

项目的发大比例，默认为0，即如果存在剩余空间，也不放大

flex-shrink属性

定义项目的缩小比例，默认1，如果空间不足，该项目将缩小

flex-basis属性

定义在分配多余空间之前，项目占据main axis空间

flex属性

flex属性是flex-grow flex-shrink flex-basisi的简写，默认值0 1 auto，后两个属性可选
该属性有两个快捷键：auto(1 1 auto)，none(0 0 auto)

align-self属性

定义单个item的对齐方式，可以覆盖flex容器的align-items属性

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

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

CSS6：flex布局

摘要：主要用来做横向的布局。元素的布局学习我分成两个部分，第一个部分是元素布局。以下几个属性影响着元素的布局。详细还是看分钟彻底弄懂布局讲的非常明白。的时候，伸缩时需要考虑，按照进行等比例伸缩。布局套路学习布局教程实例篇前言：这是我看过最好的flex布局教程：30分钟彻底弄懂flex布局传统的布局方法与flex属性通览 showImg(https://segmentfault.com/i...

Jioby 2019-08-29 17:09 评论0 收藏0
结合CSS3的布局新特征谈谈常见布局方法

摘要：案例图片来自腾讯年的一道前段笔试题，有兴趣的同学可以去看一下。腾讯前端面试稿布局布局指页面布局像一张宣传海报，以一张精美图片作为页面的设计中心。写在前面最近看到《图解CSS3》的布局部分，结合自己以前阅读过的一些布局方面的知识，这里进行一次基于CSS2、3的各种布局的方法总结。常见的页面布局在拿到设计稿时，作为一个前端人员，我们首先会做的应该是为设计图大致地划分区域，然后选择一...

xuhong 2019-08-28 18:31 评论0 收藏0
结合CSS3的布局新特征谈谈常见布局方法

摘要：案例图片来自腾讯年的一道前段笔试题，有兴趣的同学可以去看一下。腾讯前端面试稿布局布局指页面布局像一张宣传海报，以一张精美图片作为页面的设计中心。写在前面最近看到《图解CSS3》的布局部分，结合自己以前阅读过的一些布局方面的知识，这里进行一次基于CSS2、3的各种布局的方法总结。常见的页面布局在拿到设计稿时，作为一个前端人员，我们首先会做的应该是为设计图大致地划分区域，然后选择一...

cnTomato 2019-08-01 15:01 评论0 收藏0
几种常见布局的flex写法

摘要：几种常见布局的写法首先要对父元素设置布局方式，同时在本案例中，利用媒体查询，当屏幕分辨率小于的时候，布局变成纵向排列。两列布局定宽是的简写方式。 flex布局目前基本上兼容主流的浏览器，且实现方式简单。我整理了flex的一些知识点，并且总结归纳了几种常见布局的flex写法 flex基础知识点 flex-grow和flex-shrink相关计算公式公式1：子元素空间 < 父容器父...

fish 2019-08-01 17:08 评论0 收藏0
我所知道的flex布局 —— 上篇

摘要：布局也经历了一段演变历史。不同于将要出现的网格布局针对目标为大比例布局，弹性盒布局更适用于应用组件和小比例布局。常规布局是基于块和内联流方向，而布局是基于流。前言你还在用display+position+float来进行css布局吗？有没有觉得用传统的这种布局方法来实现特殊布局特别麻烦困难，例如：垂直居中。今天来记录一下自己对flex布局的了解（虽然不算神马新东西了都可以说是旧东西...

andycall 2019-08-30 13:13 评论0 收藏0
CSS Flex 布局：用 Flex 来实现圣杯布局

摘要：布局是年提出的，目前已经被所有浏览器支持，也是我现在布局的首选方案。实践用来实现圣杯布局圣杯布局指的是一种最常见的网站布局。一般情况下，这种布局要求固定高度，固定宽度，自适应。 Flex 布局是 W3C 2009年提出的，目前已经被所有浏览器支持，也是我现在布局的首选方案。Flex 布局使用起来是非常简单的，本文谈一谈平时使用可能需要注意的问题。 align-content 平时使用 ...

Olivia 2019-08-22 15:13 评论0 收藏0