CSS弹性盒模型flex在布局中的应用_html/css

来源：层花娱乐

× 目录 [1]元素居中 [2]两端对齐 [3]底端对齐 [4]输入框按钮 [5]等分布局 [6]自适应布局 [7]悬挂布局 [8]全屏布局

前面的话

　　前面已经详细介绍过flex弹性盒模型的基本语法和兼容写法，本文将介绍flex在布局中的应用

【1】伸缩容器上使用主轴对齐justify-content和侧轴对齐align-items

 DEMO

【2】在伸缩项目上使用margin:auto

 DEMO

 DEMO DEMO DEMO DEMO

 DEMO DEMO DEMO DEMO

 1 2 3 4

left

center

right

 左侧悬挂 主要内容主要内容主要内容主要内容主要内容主要内容主要内容主要内容主要内容主要内容主要内容主要内容主要内容

top

left

right

bottom