它也被称为弹性盒子模型。它基本上是一个布局模型，提供了一种简单而干净的方式来安排容器内的项目。Flexbox不同于垂直偏置的块型和水平偏置的直列型。Flexbox是为小规模布局而创建的，还有另一个标准叫做grid，它更倾向于大规模布局，它的工作方式类似于Twitter bootstrap grid系统的工作方式。flex响应灵敏，移动友好。要使用flex，首先创建一个flex容器。若要创建flex容器，请将display属性设置为flex。
例子：

.main-container { display: flex; }

弹性属性：

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

flex-direction：flex-direction用于定义弹性物品的方向。在flexbox中, 默认轴为水平轴, 因此项目将排成一行。
语法如下：

// Stacking flex items column wise flex-direction: column; // Stacking flex items from bottom to top flex-direction: column-reverse; // Stacking flex items row wise flex-direction: row; // Stacking flex items from right to left flex-direction: row-reverse;

例子：

< !DOCTYPE html> < html > < head > < title > flexbox< / title > < style > .gfg_flex { display: flex; flex-direction: row; background-color: green; text-align:center; }.gfg_flex > div { background-color: #f4f4f4; width: 100px; height:100px; margin: 10px; font-size: 40px; } h2 { text-align:center; } .geeks { font-size:40px; text-align:center; color:#009900; font-weight:bold; } < / style > < / head > < body > < div class = "geeks" > lsbin< / div > < h2 > flex-direction Property< / h2 > < div class = "gfg_flex" > < div > Box A< / div > < div > Box B< / div > < div > Box C< / div > < div > Box D< / div > < div > Box E< / div > < / div > < / body > < / html >

输出如下：

文章图片
flex-wrap：flex-wrap属性用于定义flex-item的包装。如果将flex-wrap属性设置为wrap, 则在浏览器的窗口中设置该框。如果浏览器窗口小于元素, 则元素下降到下一行。
语法如下：

// Wrap flex items when necessary flex-wrap: wrap; // Flex items will not wrap flex-wrap: nowrap;

例子：

< !DOCTYPE html> < html > < head > < title > flex-wrap property< / title > < style > .gfg_flex { display: flex; flex-wrap: wrap; text-align:center; background-color: green; }.gfg_flex > div { background-color: #f4f4f4; width: 100px; height:100px; margin: 10px; font-size: 40px; } h2 { text-align:center; } .geeks { font-size:40px; text-align:center; color:#009900; font-weight:bold; } < / style > < / head > < body > < div class = "geeks" > lsbin< / div > < h2 > flex-wrap Property< / h2 > < div class = "gfg_flex" > < div > Box A< / div > < div > Box B< / div > < div > Box C< / div > < div > Box D< / div > < div > Box E< / div > < div > Box F< / div > < div > Box G< / div > < div > Box H< / div > < div > Box I< / div > < / div > < / body > < / html >

输出如下：

文章图片
注意：
flex-flow是flex-direction和flex-wrap的简写。
语法如下：

flex-flow: row wrap;

justify-content：justify-content属性用于根据flexbox容器内的主轴对齐flex项目。
语法如下：

// Aligns the flex items at the center justify-content: center; // The space is distributed around the flexbox items //and it also adds space before the first item and after the last one. justify-content: space-around; // Space between the lines justify-content: space-between; // Aligns the flex items at the beginning of the container justify-content: flex-start; // Aligns the flex items at the end of the container justify-content: flex-end;

例子：

< !DOCTYPE html> < html > < head > < title > justify flexbox property< / title > < style > .flex1 { display: flex; justify-content: center; background-color: green; }.flex2 { display: flex; justify-content: space-around; background-color: green; }.flex3 { display: flex; justify-content: space-between; background-color: green; }.flex4 { display: flex; justify-content: flex-start; background-color: green; }.flex5 { display: flex; justify-content: flex-end; background-color: green; }.flex-items { background-color: #f4f4f4; width: 100px; height:50px; margin: 10px; text-align: center; font-size: 40px; } h2 { text-align:center; } .geeks { font-size:40px; text-align:center; color:#009900; font-weight:bold; } < / style > < / head > < body > < div class = "geeks" > lsbin< / div > < h2 > The justify-content Property< / h2 > < b > justify-content: center < / b > < div class = "flex1" > < div class = "flex-items" > 1< / div > < div class = "flex-items" > 2< / div > < div class = "flex-items" > 3< / div > < / div > < br > < b > justify-content: space-around < / b > < div class = "flex2" > < div class = "flex-items" > 1< / div > < div class = "flex-items" > 2< / div > < div class = "flex-items" > 3< / div > < / div > < br > < b > justify-content: space-between < / b > < div class = "flex3" > < div class = "flex-items" > 1< / div > < div class = "flex-items" > 2< / div > < div class = "flex-items" > 3< / div > < / div > < br > < b > justify-content: flex-start < / b > < div class = "flex4" > < div class = "flex-items" > 1< / div > < div class = "flex-items" > 2< / div > < div class = "flex-items" > 3< / div > < / div > < br > < b > justify-content: flex-end < / b > < div class = "flex5" > < div class = "flex-items" > 1< / div > < div class = "flex-items" > 2< / div > < div class = "flex-items" > 3< / div > < / div > < / body > < / html >

输出如下：

文章图片
align-items：此属性用于根据交叉轴垂直对齐弹性项目。
语法如下：

// Aligns the flex items in the middle of the container align-items: center; // Flexbox items are aligned at the baseline of the cross axis align-items: baseline; // Stretches the flex items align-items: stretch; // Aligns the flex items at the top of the container align-items: flex-start; // Aligns elements at the bottom of the container align-items: flex-end;

例子：

< !DOCTYPE html> < html > < head > < title > align-items property< / title > < style > .flex1 { display: flex; height: 200px; align-items: center; background-color: green; }.flex2 { display: flex; height: 200px; align-items: baseline; background-color: green; }.flex3 { display: flex; height: 200px; align-items: stretch; background-color: green; }.flex4 { display: flex; height: 200px; align-items: flex-start; background-color: green; }.flex5 { display: flex; height: 200px; align-items: flex-end; background-color: green; }.flex-items { background-color: #f4f4f4; width: 100px; margin: 10px; text-align: center; font-size: 50px; } h2 { text-align:center; } .geeks { font-size:40px; text-align:center; color:#009900; font-weight:bold; } < / style > < / head > < body > < div class = "geeks" > lsbin< / div > < h2 > The align-items Property< / h2 > < b > align-items: center < / b > < div class = "flex1" > < div class = "flex-items" > 1< / div > < div class = "flex-items" > 2< / div > < div class = "flex-items" > 3< / div > < / div > < br > < b > align-items: baseline < / b > < div class = "flex2" > < div class = "flex-items" > 1< / div > < div class = "flex-items" > 2< / div > < div class = "flex-items" > 3< / div > < / div > < br > < b > align-items: stretch < / b > < div class = "flex3" > < div class = "flex-items" > 1< / div > < div class = "flex-items" > 2< / div > < div class = "flex-items" > 3< / div > < / div > < br > < b > align-items: flex-start < / b > < div class = "flex4" > < div class = "flex-items" > 1< / div > < div class = "flex-items" > 2< / div > < div class = "flex-items" > 3< / div > < / div > < br > < b > align-items: flex-end < / b > < div class = "flex5" > < div class = "flex-items" > 1< / div > < div class = "flex-items" > 2< / div > < div class = "flex-items" > 3< / div > < / div > < / body > < / html >

输出如下：

文章图片
align-content：此属性定义了flexbox中每个flex行的对齐方式, 并且仅在应用flex-wrap：wrap时, 即存在多行flexbox项目时才适用。
语法如下 ：

// Displays the flex lines with equal space between them align-content: space-between; // Displays the flex lines at the start of the container align-content: flex-start; // Displays the flex lines at the end of the container align-content: flex-end; // Dy using space-around property space will be // Distributed equally around the flex lines align-content: space-around; // Stretches the flex lines align-content: stretch;

例子：

< !DOCTYPE html> < html > < head > < title > align-content property< / title > < style > .main-container { display: flex; height: 400px; flex-wrap: wrap; align-content: space-between; background-color: green; }.main-container div { background-color: #f4f4f4; width: 100px; margin: 10px; text-align: center; font-size: 50px; } h2 { text-align:center; } .geeks { font-size:40px; text-align:center; color:#009900; font-weight:bold; } < / style > < / head > < body > < div class = "geeks" > lsbin< / div > < h2 > The align-content Property< / h2 > < div class = "main-container" > < div > 1< / div > < div > 2< / div > < div > 3< / div > < div > 4< / div > < div > 5< / div > < div > 6< / div > < div > 7< / div > < div > 8< / div > < div > 9< / div > < div > 10< / div > < / div > < / body > < / html >

【CSS高级布局（Flexbox布局完全指南）】输出如下：

文章图片

推荐阅读

• 

  幻想全明星新英雄雏鹤爱图文介绍 幻想全明星雏鹤爱强不强 基本介绍
• 

  决战平安京袭色大噬魔丸怎么样 袭色大噬魔丸装备分析
• 

  女人也会长胡子？ 女生有胡子
• 

  如何去除衣服霉斑 衣服去除霉斑的教程
• 

  数据库解密工具，有个db数据文件能用Access能打开但是有密码有什么好密码破
• 

  UOS|统信UOS助手发布：支持“一键秒传”
• 

  板栗在冰箱保存方法 教你如何保鲜板栗
• 

  电脑怎么重装系统
• 

  go语言书适合初学者的书，go语言入门书籍
• 

  失策
• 

  4个月的宝宝感冒咳嗽、打喷嚏、流鼻涕能吃艾畅吗?
• 

  新鲜荔枝怎么保存
• 

  早上做平板支撑有什么好处
• 

  相机水下拍摄要用什么，水下拍摄的相机哪个牌子的好?
• 

  沈岸初夏是什么电视剧 沈岸初夏是什么电视剧最后一集
• 

  消化管共同具有的运动形式是
• 

  七星瓢虫和花大姐的区别
• 

  前轮前束正常值是多少
• 

  哪个网是正规的起名网 如何制作起名网站，网店名字大全 起名网
• 

  鲜枣有什么功效 新鲜大枣的好处

• Python如何使用Collections.UserDict（代码示例）
• 算法设计（将第一个元素加倍，然后将零移动到结尾）
• Python程序如何实现在列表中查找第二大数字（）
• PHP如何使用Ds\Sequence apply()函数（示例）
• PHP如何使用DS\Map clear()函数（用法示例）
• 算法设计（如何实现CamelCase模式匹配（代码示例））
• 如何反向一个整数的位数（（包括溢出处理））
• Win8.1桌面与任务栏总是自动刷新怎样处理？
• Win8.1无法升级Win10出错80240020怎样处理？