css横排布局,CSS3（一）横向布局（Flex）

前言

前端的div默认是占据一行；而如果想在一行中放多个div，flex布局就是解决这一问题的最好方式；

当然flex也可进行纵向布局，而本章中主要讲解横向布局；

所以下边的属性，一般都以横向布局的眼光来讲解。

一、介绍

flex布局又称弹性盒子，是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。

弹性盒子由弹性容器(Flex container)和弹性子元素(Flex item)组成。

弹性容器外及弹性子元素内是正常渲染的。

弹性盒子只定义了弹性子元素如何在弹性容器内布局。

弹性子元素通常在弹性盒子内一行显示。默认情况每个容器只有一行。

二、使用方式

1. 基础使用

设置弹性容器的display属性为flex

a

b

c

...

.flexContainer {

display: flex;

background-color: gray;

width: 300px;

height: 100px;

}

.flexItem {

width: 80px;

height: 80px;

}