弹性盒模型，flex布局

CoderDock 发布于2019-04-23 11:54 / 3537人阅读

摘要：弹性盒模型弹性盒子是的一种新布局模式，由容器父元素和项目子元素组成。弹性盒子是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。

弹性盒模型

弹性盒子是css3的一种新布局模式，由容器（父元素）和项目（子元素）组成。

弹性盒子是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。

引入弹性盒模型的目的：提供一种更加有效的方式来对一个容器中的子元素进行排列、对齐和分配空白区间。

设置弹性盒子：display:flex或inline-flex; 区别：flex独占一行；inline-flex占据自己应该占据的位置，有点像inline-block，不支持margin:auto。

容器属性

1.flex-direction 确定主轴和方向

row 默认，从左到右
row-reverse 从右到左
column 从上到下
column-reverse 从下到上

2.flex-wrap 规定项目是否换行

nowrap 默认，不换行
wrap 换行，交叉轴从上到下
wrap-reverse 换行，第一行在下，交叉轴从下到上

3.flex-flow 复合属性，flex-direction和flex-wrap组成的复合属性

row nowrap 默认，从左到右不换行

4.justify-content 项目在主轴上的对齐方式

flex-start 默认，主轴起点对齐
flex-end 主轴终点对齐
center 主轴居中对齐
space-between 主轴上项目两端对齐，项目之间间隙平分空白
space-around 主轴上的项目两侧间隔相等

5.align-content 多行项目在交叉抽（与主轴垂直）上的对齐方式，不要和align-items共存

stretch 默认，不设置项目高度的时候，占满平分整个交叉轴
flex-start 交叉轴起点对齐
flex-end 交叉轴终点对齐
center 交叉轴居中对齐
space-between 交叉轴上项目两端对齐，项目之间间隙平分空白
space-around 交叉轴上项目两侧间隔相等

6.align-items 单行项目在交叉轴上的对齐方式

stretch 默认，不设置高度（竖直时）或宽度(水平时)占满整个交叉轴
flex-start 交叉轴的起点对齐
flex-end 交叉轴的终点对齐
center 交叉轴的中间对齐
baseline 文字基线对齐

项目属性

1.flex-grow 设置项目的扩大比例

0 默认，不扩大
1 项目扩大填满容器，值为1时占一份，值为2时占两份，不支持负值

2.flex-shrink 设置项目的收缩比例

1 默认，当容器宽度不够时，项目等比例缩小
0 不缩小
2,3...n 值越大缩小得越多

3.flex-basis 设置项目初始长度

auto 默认，项目没有设置宽度的时候，默认内容撑开宽度
0 不设置初始值
number 规定项目的初始长度

4.flex 复合写法flex:flex-grow flex-shrink flex-basis

auto 相当于1 1 auto
none 相当于0 0 auto
1 相当于1 1 0
initial 相当于0 1 auto

5.align-self 多带带控制交叉轴一个项目的对齐方式

auto 默认值，继承父容器的align-items
其他属性值与align-items一样

6.order 规定项目在主轴上的排列顺序

0 默认，根据项目先后排列
整数，可为负值，数值越小排名越靠前

以上为个人理解，如有不当之处请指正！

GPU云服务器云服务器 flex布局盒模型盒模型html吗简述html盒模型

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

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

CSS中各种布局的背后(*FC)

摘要：中各种布局的背后，实质上是各种的组合。相反，一些块容器盒，比如非替换行内块及非替换表格单元格，不是块级盒。描述元素跟它的后代之间的影响。行盒行盒由行内格式化上下文产生的盒，用于表示一行。弹性容器外和弹性项目内的一切元素都不受影响。 CSS中各种布局的背后，实质上是各种*FC的组合。CSS2.1 中只有 BFC 和 IFC, CSS3 中还增加了 FFC 和 GFC。盒模型(Box M...

miracledan 2019-08-30 14:01 评论0 收藏0
弹性盒模型flex

摘要：一是的缩写，意为弹性布局定义弹性布局二基本定义我只简单的说一下容器和项目，因为只关系容器和项目来讲的个人理解。它可以设为或属性一样的值，则该项目占据固定的空间。默认值为，表示继承夫元素的属性，如果没有夫元素，则等同于。一、flex flex是flexible box的缩写，意为弹性布局；定义弹性布局 display:flex; box{ display:flex; } 二...

Gemini 2019-04-23 11:53 评论0 收藏0
弹性盒模型

摘要：弹性盒模型相比传统的盒模型，可以更加简单的实现各种布局页面简单举一个例子，代码如下加上厂商前缀，目前使用方式都有三种写法，旧的，过度的，新的的属性假如的改成也能实现数字的垂直居中弹性盒模型相比传统的盒模型（display+position+float），可以更加简单的实现各种布局页面简单举一个例子，代码如下 1 2 3 css .row{width:200px;...

BakerJ 2019-08-30 12:52 评论0 收藏0
flex布局的温故学习

摘要：需要注意的是当时设置布局之后，子元素的的属性将会失效。各行向弹性盒容器的中间位置堆叠。各行在弹性盒容器中平均分布，两端保留子元素与子元素之间间距大小的一半。各行将会伸展以占用剩余的空间。 flex的简介在flex的容器中默认存在两条轴，水平主轴main axis和垂直交叉轴cross axis，这是默认的设置，不过我们可以通过设置将主轴的方向变成垂直方向，交叉轴变成水平方向。在一...

Aldous 2019-08-30 11:12 评论0 收藏0
CSS的常用单位 %和 vw vh 和 box-sizing：border-box; 和flex

摘要：一理解号是中的常用单位，它是相对于父容器而言的。效果图利用设置了的宽代码二理解这俩个单位是相对于视口的大小而定的。效果图代码弹性盒布局一、% 理解： %号是CSS中的常用单位，它是相对于父容器而言的。如:一个父容器的宽是100px,给它的子元素一个10%，那么子元素的宽就是100px的10% 10px。效果图：（利用%设置了li 的宽）showImg(https://seg...

lordharrd 2019-08-29 16:14 评论0 收藏0