Flex 布局教程实例
一、Flex 布局是什么？
Flex 是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。
任何一个容器都可以指定为 Flex 布局。
.box{ display: flex; }
行内元素也可以使用 Flex 布局。
.box{ display: inline-flex; }
Webkit 内核的浏览器，必须加上-webkit前缀。
.box{ display: -webkit-flex; /* Safari */ display: flex; }
注意，设为 Flex 布局以后，子元素的float、clear和vertical-align属性将失效。
二、基本概念
采用 Flex 布局的元素，称为 Flex 容器（flex container），简称"容器"。它的所有子元素自动成为容器成员，称为 Flex 项目（flex item），简称"项目"。
容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）。主轴的开始位置（与边框的交叉点）叫做main start，结束位置叫做main end；交叉轴的开始位置叫做cross start，结束位置叫做cross end。
项目默认沿主轴排列。单个项目占据的主轴空间叫做main size，占据的交叉轴空间叫做cross size。
三、容器的属性
三、容器的属性
以下6个属性设置在容器上。
- flex-direction
- flex-wrap
- flex-flow
- justify-content
- align-items
- align-content
四、项目的属性
以下6个属性设置在项目上。
orderflex-growflex-shrinkflex-basisflexalign-self
实例代码html如下:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>flex布局</title> </head> <style> *{ margin: 0; padding: 0; } .d1{ width: 180px; height: 100px; border: 1px solid #d3d3d3; border-radius: 4px; margin: 20px 0; /*flex布局 -- css*/ display: flex; /*默认左对齐**/ justify-content: center; /**水平对齐方式justify-content flex-start:左对齐 center:居中 flex-end:右对齐**/ align-items:center; /**垂直对齐方式align-items flex-start:左对齐 center:居中 flex-end:右对齐**/ } .d2{ width: 180px; /*height: 100px;*/ border: 1px solid #d3d3d3; border-radius: 4px; margin: 20px 0; /*flex布局 -- css*/ display: flex; flex-direction: column; /**垂直排列**/ justify-content: space-between; /**水平排列**/ align-items: center; /**垂直居中**/ display: flex; flex-direction: column; justify-content: space-between; align-items: center; } .d1 p{ margin: 0 10px; } .d2 p{ margin: 10px 0px; } </style> <body> <!--单项目--> <div class="d1"> <!-- <img src="Locked2.png" alt=""> --> <p>首页</p> <p>首页</p> </div> <!--双项目--> <div class="d2"> <p>图片</p> <p>首页</p> <p>计划</p> </div> </body> </html>
效果图：
谢谢大家！！！