文章目录

弹性盒布局
- 弹性盒布局概述
- 弹性盒布局属性
- - display
  - flex-flow
  - justify-content
  - align-items
  - order
  - flex
  - align-self
- 总结
- 弹性盒布局小案例
- 实现效果图
- 使用弹性盒布局建设个人社交网站

弹性盒布局

弹性盒布局概述

说到响应式，就不得不提CSS3中的弹性盒布局了，它可以轻松的创建响应式网页布局，为盒状模型增加灵活性。

CSS3 弹性盒（ Flexible Box 或 flexbox），是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。
引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行排列、对齐和分配空白空间。

弹性盒改进了块模型，既不使用浮动，也不会在弹性盒容器与其内容之间合并外边距，是一种非常灵活的布局方法。

弹性盒布局属性

display

display用于指定弹性盒的容器，其值可以为flex；
如果为行内元素，值为inline-flex。

flex-flow

flex-flow 是属性 flex-direction 和 flex-wrap 的简写，用于排列弹性子元素。

justify-content

justify-content属性能够设置子元素如何在当前轴方向的排列，其取值如下表所示。（在主轴上如何对齐）

align-items

align-items属性用于设置子元素在垂直于轴的方向上的排列，其取值如下表所示。（在交叉轴上如何对齐）

举例：

order

order属性用于设置子元素出现的顺序。

order允许我们自定义项目的排列顺序，默认为0，属性值是数字，数值越小越靠前，有点类似我们优先队列中的优先级

举例：

flex

flex属性是flex-grow（扩展比率）， flex-shrink（收缩比率）和flex-basis（宽度，像素值）的缩写，能够设置子元素的伸缩性。

举例：

align-self

举例：

总结

弹性容器的每一个子元素变为一个弹性子元素，弹性容器直接包含的文本变为匿名的弹性子元素。
第2单元中，多列布局中的column-*属性对弹性子元素无效。
第1单元中，float 和 clear 对弹性子元素无效。使用 float 会导致 display 属性计算为 block.。
vertical-align属性对弹性子元素的对齐无效。

弹性盒布局小案例

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>弹性盒属性</title>
</head>
<style type="text/css">.box {min-height: 200px;display: flex;/*指定弹性盒的容器*//*flex-direction: row|row-reverse|column|column-reverse;flex-wrap: nowrap|wrap|wrap-reverse;*/flex-flow: row;/*弹性盒子元素按横轴方向顺序排列*/justify-content: center;/*设置弹性盒子元素向行中间位置对齐*/align-items: flex-end;/*弹性盒子元素向垂直于轴的方向上的中间位置对齐*/background-color: gray;}.A,.B,.C {background-color: white;border:1px solid gray;}.box div.A {order: 1;/*order设置该子元素出现的顺序*/flex-grow: 0;/*扩展比率*/flex-shrink: 1;/*收缩比率*/flex-basis: auto;/*宽度，像素值*/align-self: center;/*该子元素在该行的纵轴上居中放置。*/}.box div.B {order: 2;flex: 0 1 auto;/*扩展比率0、收缩比率1和宽度居中的缩写形式*/align-self: center;}.box div.C {order: 3;flex: 0 1 auto;align-self: center;}
</style>
<body>
<div class="box"><div class="A">A</div><div class="B">B</div><div class="C">C</div>
</div>
</body>
</html>

实现效果图

使用弹性盒布局建设个人社交网站

弹性盒布局综合案例：深入理解弹性盒布局之实现个人社交网站——Web前端系列自学笔记

深入理解弹性盒布局（fiex-box）——Web前端系列自学笔记相关推荐

CSS3 弹性盒布局模型和布局原理
在CSS 3中,CSS Flexible Box模块为一个非常重要的模块,该模块用于以非常灵活的方式实现页面布局处理. 虽然可以使用其他CSS样式属性来实现页面布局处理,但是如果使用CSS Flexi ...
CSS3中弹性盒布局的最新版
虽然可以使用其他CSS样式属性来实现页面布局处理,但是如果使用CSS Flexible Box模块中定义的弹性盒布局技术,可以根据屏幕尺寸或浏览器窗口尺寸自动调整页面中各局部区域的显示方式,即实现非常 ...
CSS3 建立弹性盒布局 Flex布局
弹性盒布局模型中引入了一些新的属性,只要设置好相应属性,盒子就具有弹性,在改变浏览器窗口大小时,盒子大小也会自动发生变化.并且,盒子的大小由浏览器自动计算,使页面布局更加灵活.更加简单,可以很轻松创建 ...
CSS3弹性盒布局方式
CSS3弹性盒子布局方式 CSS3 弹性盒子(Flex Box)是一种适应不同屏幕大小及设备类型的一种布局方式.引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行排列.对齐和分 ...
弹性盒布局——骰子布局
弹性盒布局-骰子布局个人认为正常的骰子应该是这样的排布的,不是太复杂,一点应该就是在正中间,不会随便挪动的吧(菜鸡发言hh) 总代码:(每个骰子分别弹性盒布局就好) <!DOCTYPE htm ...
【CSS 弹性盒子布局 (Flexible Box Layout)】
CSS 弹性盒子布局 Flexible Box Layout CSS 弹性盒子布局 (Flexible Box Layout) 1. 弹性盒子布局的基本概念和术语 2. flex 属性: 设置伸缩 ...
[css] 解释下css3的flexbox（弹性盒布局模型），以及它应用场景有哪些？
[css] 解释下css3的flexbox(弹性盒布局模型),以及它应用场景有哪些? 手机端中比较常用的三段式布局, 头尾固定高度中间自适应它可以修改父元素下所有子元素的位置和排序方式相对于浮 ...
CSS3与弹性盒布局
1.弹性盒布局对齐模式 1.1.弹性盒子在规定弹性盒子之中的子级元素换行显示之前父级元素必须是弹性盒子模型,也就是设置 display 为 flex 代码如下: <!DOCTYPE html& ...
最流行的布局方案 Flex 弹性盒布局详解
Flex布局又称弹性盒布局,是在CSS3中的一种新布局方式,可以简洁.方便.响应式地实现各种页面布局,因此自一提出受到了极大地追捧,目前也得到了各大主流浏览器的支持,因此迅速替代了之前的"d ...

深入理解弹性盒布局（fiex-box）——Web前端系列自学笔记

文章目录

弹性盒布局

弹性盒布局概述

弹性盒布局属性

display

flex-flow

justify-content

align-items

order

flex

align-self

总结

弹性盒布局小案例

实现效果图

使用弹性盒布局建设个人社交网站

深入理解弹性盒布局（fiex-box）——Web前端系列自学笔记相关推荐

最新文章

热门文章