CSS 的弹性布局(flex) ，是什么？

一、弹性布局是什么？

元素根据窗口大小变化而自动伸长或缩短，使得整个页面格式保持不变。

二、怎么使用？

1、使用方法

/* 1、父元素中增加 display 属性；*/
display: flex;/* 2、子元素中增加 flex、flex-direction等属性；*/
flex: 1;
flex-direction: column;

2、示例

新建 index.html 文件，复制下面代码到文件，用浏览器打开 index.html，在调整浏览器窗口大小，即可看到article 元素的大小也跟着改变。

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>Flexbox 0 — starting code</title><style>html {font-family: sans-serif;}body {margin: 0;}header {background: purple;height: 100px;}h1 {text-align: center;color: white;line-height: 100px;margin: 0;}article {padding: 10px;margin: 10px;background: aqua;flex: 3;}/* Add your flexbox CSS below here */section {display: flex}</style>
</head><body><header><h1>Sample flexbox example</h1></header><section><article><h2>First article</h2><p>Tacos actually microdosing, pour-over semiotics banjo chicharrones retro fanny pack portland everydaycarry vinyl typewriter. </p></article><article><h2>Second article</h2><p>Tacos actually microdosing, pour-over semiotics banjo chicharrones retro fanny pack portland everydaycarry vinyl typewriter. </p></article><article><h2>Third article</h2><p>Tacos actually microdosing, pour-over semiotics banjo chicharrones retro fanny pack portland everydaycarry vinyl typewriter. </p><p>Cray food truck brunch, XOXO +1 keffiyeh pickled chambray waistcoat ennui. Organic small batch paleo8-bit.</p></article></section>
</body></html>

三、重要概念

1、flex

flex 是 flex-grow 、flex-shrink 、flex-basis 这三个属性的缩写形式，分别表示伸长比例、缩短比率、变化基数。更多内容

/* 关键字值 */
flex: auto;
flex: initial;
flex: none;/* 一个值, 无单位数字: flex-grow */
flex: 2;/* 一个值, width/height: flex-basis */
flex: 10em;
flex: 30px;
flex: min-content;/* 两个值: flex-grow | flex-basis */
flex: 1 30px;/* 两个值: flex-grow | flex-shrink */
flex: 2 2;/* 三个值: flex-grow | flex-shrink | flex-basis */
flex: 2 2 10%;/*全局属性值 */
flex: inherit;
flex: initial;
flex: unset;

auto ：元素会缩短或伸长自己，来撑满flex父容器，等同于： flex: 1 1 auto；
initial ：元素会缩短自身以适应 flex父容器，但不会伸长，等同于：flex: 0 1 auto；
none ：元素不会缩短也不会伸长，等同于：flex: 0 0 auto。
flex-grow ：负值无效，默认值为 1（初始值为0），指定了 flex 元素的伸长规则。更多内容
flex-shrink ：负值无效，默认值为1（初始值为0），指定了 flex 元素的收缩规则。更多内容
flex-basis ：指定了 flex 元素在主轴方向上的初始大小。默认值为 0，表示不伸长也不缩短。更多内容

2、方向

让元素在 flex父元素中，进行行或列方向上的伸长或缩短的变化。

flex-direction: row;
flex-direction: row-reverse;
flex-direction: column;
flex-direction: column-reverse;

3、换行

元素过多，超过flex父元素的宽度时，2个设置让其自动换行。

/* 1、flex父元素设置 */
flex-wrap: wrap/* 2、元素设置宽度 */
flex: 300px;

4、flex-flow

flex-direction: row;
flex-wrap: wrap;/* 上面写法等同于下面写法 */
flex-flow: row wrap;

5、水平、垂直对齐

align-items ：对齐 grid 或 flex 行中的所有元素。align-items - MDN
align-self ：对齐 grid 或 flex 中的指定元素。align-self - MDN
justify-content ：flex布局中，设置元素间隔空间的分配方式。justify-content - MDN

order ：flex 布局中，指定元素的顺序。order - MDN

#main { display: flex; }
#main > article { flex:1;         order: 2; }
#main > nav     { width: 200px;   order: 1; }
#main > aside   { width: 200px;   order: 3; }

6、flex 嵌套

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>Complex flexbox example</title><style>html {font-family: sans-serif;}body {margin: 0;}header {background: purple;height: 100px;}h1 {text-align: center;color: white;line-height: 100px;margin: 0;}article {padding: 10px;margin: 10px;background: aqua;}/* Add your flexbox CSS below here */section {display: flex;}article {flex: 1 200px;}article:nth-of-type(3) {flex: 3 200px;display: flex;flex-flow: column;}article:nth-of-type(3) div:first-child {flex: 1 100px;display: flex;flex-flow: row wrap;align-items: center;justify-content: space-around;}button {flex: 1 auto;margin: 5px;font-size: 18px;line-height: 1.5;}</style>
</head><body><header><h1>Complex flexbox example</h1></header><section><article><h2>First article</h2><p>Tacos actually microdosing, pour-over semiotics banjo chicharrones retro fanny pack portland everydaycarry vinyl typewriter. Tacos PBR&B pork belly, everyday carry ennui pickled sriracha normcore hashtagpolaroid single-origin coffee cold-pressed. PBR&B tattooed trust fund twee, leggings salvia iPhone photobooth health goth gastropub hammock.</p></article><article><h2>Second article</h2><p>Tacos actually microdosing, pour-over semiotics banjo chicharrones retro fanny pack portland everydaycarry vinyl typewriter. Tacos PBR&B pork belly, everyday carry ennui pickled sriracha normcore hashtagpolaroid single-origin coffee cold-pressed. PBR&B tattooed trust fund twee, leggings salvia iPhone photobooth health goth gastropub hammock.</p></article><article><div><button>Smile</button><button>Laugh</button><button>Wink</button><button>Shrug</button><button>Blush</button></div><div><p>Tacos actually microdosing, pour-over semiotics banjo chicharrones retro fanny pack portland everydaycarry vinyl typewriter. Tacos PBR&B pork belly, everyday carry ennui pickled sriracha normcorehashtag polaroid single-origin coffee cold-pressed. PBR&B tattooed trust fund twee, leggings salviaiPhone photo booth health goth gastropub hammock.</p></div><div><p>Cray food truck brunch, XOXO +1 keffiyeh pickled chambray waistcoat ennui. Organic small batch paleo8-bit. Intelligentsia umami wayfarers pickled, asymmetrical kombucha letterpress kitsch leggingscold-pressed squid chartreuse put a bird on it. Listicle pickled man bun cornhole heirloom artparty.</p></div></article></section>
</body></html>

四、参考文档

CSS 的弹性布局(flex) ，是什么？

CSS 的弹性布局(flex) ，是什么？相关推荐

前端之网页三剑客Css之弹性布局Flex作用
一.Flex布局是什么? Flex是Flexible Box的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性. 任何一个容器都可以指定为Flex布局. <div cl ...
css布局之弹性布局flex
1. 弹性布局作用作用:弹性布局flex能按照我们的设置自动计算各子元素之间的间距并将之布局好,而不需要像定位那样手动计算布局. 2.弹性布局的定义和属性弹性布局是定义在一个父容器中,加上disp ...
css基础--弹性布局
一.什么是弹性布局 Flex是Flexible Box的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性. 任何一个容器都可以指定为Flex布局. 二.基本概念采用Flex ...
弹性布局flex 伸缩布局 flex布局什么是弹性布局 justify-content
弹性布局(flex布局.伸缩布局) 一.什么是弹性布局 flex 是 flexible Box 的缩写,意为"弹性布局",用来为盒模型提供最大的灵活性,任何一个容器都可以指定为fl ...
弹性布局(Flex布局)
弹性布局(Flex布局) 文章目录弹性布局(Flex布局) 绪论 Flex布局是什么? Flex布局的基本概念 Flex容器的属性以下六个属性设置在Flex容器上 flex-direction属性 ...
(二)弹性布局Flex
弹性布局Flex 本周在逆战班学习了布局方面的知识,作为前端开发布局是最关键的,此文章用来写自己对弹性布局知识点的理解,和想法, 弹性布局分为两部分父元素和子元素,在父元素上设置弹性布局而控制子元素 ...
Flutter: 弹性布局Flex(Expanded)、流式布局Wrap、Flow
用Android原生实现流式布局[实现例如app的很多标签]需要自定义View继承自ViewGroup,然后代码量也不小. 相关自定义View实现流式布局,请参考这位老兄的博客: https://bl ...
CSS3多列布局 columns 弹性布局 flex
多列布局columns 多列布局可以控制页面内容的排版方式,可以将文本内容设计成像报纸一样的多列布局. 属性示例含义 column-count column-count: 3; 将元素内部分割成3 ...
我的JavaScript回顾之路_08—0227—支付密码输入框/弹性布局flex
1.支付密码输入框 <!DOCTYPE html> <html lang="en"> <head><meta charset=" ...

CSS 的弹性布局(flex) ，是什么？

一、弹性布局是什么？

二、怎么使用？

1、使用方法

2、示例

三、重要概念

1、flex

2、方向

3、换行

4、flex-flow

5、水平、垂直对齐

6、flex 嵌套

四、参考文档

CSS 的弹性布局(flex) ，是什么？相关推荐

最新文章

热门文章

CSS 的弹性布局(flex) ，是什么？

一、弹性布局 是什么？

二、怎么使用？

1、使用方法

2、示例

三、重要概念

1、flex

2、方向

3、换行

4、flex-flow

5、水平、垂直对齐

6、flex 嵌套

四、参考文档

CSS 的弹性布局(flex) ，是什么？相关推荐

最新文章

热门文章

一、弹性布局是什么？