Flex布局语法与实践

Posted 2020-06-19 March On

参考文献

阮一峰 Flex布局的语法

阮一峰 Flex布局的实践

Flex语法

Flex是什么

Flex是Flexible Box的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。任何一个容器都可以指定为Flex布局，行内元素也可以使用Flex布局。

采用Flex布局的元素，称为Flex容器（flex container），简称"容器"。它的所有子元素自动成为容器成员，称为Flex项目（flex item），简称"项目"。

Flex容器的属性

• flex-direction
• flex-wrap
• flex-flow
• justify-content
• align-items
• align-content

Flex项目的属性

• order
• flex-grow
• flex-shrink
• flex-basis
• flex
• align-self

Flex实践

（包含各种常用布局的完美解决，可以借鉴）

　　参考文献：阮一峰 Flex布局的实践

• 骰子的布局
• 网格布局
• 圣杯布局：圣杯布局（Holy Grail Layout）指的是一种最常见的网站布局。页面从上到下，分成三个部分：头部（header），躯干（body），尾部（footer）。其中躯干又水平分成三栏，从左到右为：导航、主栏、副栏。
• 输入框布局：在输入框的前方添加提示，后方添加按钮
• 悬挂式布局：主栏的左侧或右侧添加一个图片栏
• 固定底栏：页面内容太少，无法占满一屏的高度，底栏就会抬高到页面的中间。这时可以采用Flex布局，让底栏总是出现在页面的底部
• 流式布局：每行的项目数固定，会自动分行。

（完）