浅谈CSS3中的弹性布局(一)

简介: 浅谈CSS3中的弹性布局

浅谈CSS3中的弹性布局

现在的努力,只是为了实现小时候吹过的牛逼

一、什么是弹性布局?

Flex是Flexible Box的缩写,意为"弹性布局",他为盒模型提供了最大的灵活性。它即可以应用于容器中,也可以应用于行内元素。(以上说明结合微信开发者工具说明)2009年,W3C提出了一种新的方案—Flex布局,可以简便、完整、响应式地实现各种页面布局。他主要是用于移动端布局,对一个容器中的元素进行排列,对齐和分配空白空间。

二、基本概念

  • 采用Flex布局的元素,称为Flex容器(flex container),简称"容器"。
  • 它的所有子元素自动成为容器成员,称为Flex项目(flex item)简称"项目"。
  • 容器默认存在两根轴:水平的主轴(main axis)和垂直的交叉轴(cross axis)。
  • 主轴的开始位置(与边框的交叉点)叫做main start,结束位置叫做main end。
  • 交叉轴的开始位置叫做cross start,结束位置叫做cross end。
  • 项目默认沿主轴排列。单个项目占据的主轴空间叫做main size,占据的交叉轴空间叫做cross size。

如图所示:

三、主要的属性:

父容器的六大属性:

  • flex-direction  容器内项目的排列方向(默认横向排列)
  • flex-wrap   容器内项目换行方式
  • flex-flow   以上两个属性的简写方式
  • justify-content  项目在主轴上的对齐方式
  • align-items   项目在交叉轴上如何对齐
  • align-content  定义了多根轴线的对齐方式。如果项目只有一根轴线,该属性不起作用

1)flex-direction属性决定主轴的方向

flex-direction:row|row-reverse|column|column-reverse;

属性可选值的范围为:

  1. row:默认值子元素水平排列 起点在左端
  2. row-reverse:子元素水平倒序排列 起点在最右端
  3. column:子元素垂直排列 起点在上方
  4. column-reverse:子元素垂直倒序排列 起点在下方

效果如下:

**2)flex-wrap **

flex-wrap: nowrap | wrap | wrap-reverse;

属性可选值的范围为:

  1. nowrap:默认不换行当容器宽度不够时每个项目会被挤压宽度
  2. wrap:换行 并且第一行容器在最上方
  3. wrap-reverse:换行 最后一行容器在最上方。

效果如下:



浅谈CSS3中的弹性布局(二)https://developer.aliyun.com/article/1383153

相关文章
|
29天前
|
前端开发 JavaScript
Vue中使用纯CSS实现全屏网格加渐变色背景布局
Vue中使用纯CSS实现全屏网格加渐变色背景布局
11 0
|
1月前
|
设计模式 前端开发 开发者
css 三栏布局的实现
css 三栏布局的实现
22 0
|
1月前
|
前端开发 JavaScript
前端必看的8个HTML+CSS技巧 (八)瀑布流布局
前端必看的8个HTML+CSS技巧 (八)瀑布流布局
|
2月前
|
人工智能 前端开发 容器
【前端|CSS系列第4篇】CSS布局之网格布局
【前端|CSS系列第4篇】CSS布局之网格布局
|
1天前
|
容器
请解释一下 CSS3 的 Flexbox(弹性盒布局模型), 以及适用场景?
请解释一下 CSS3 的 Flexbox(弹性盒布局模型), 以及适用场景?
|
1天前
|
前端开发 JavaScript
css制作瀑布流布局
css制作瀑布流布局
6 0
|
4天前
|
Web App开发 存储 前端开发
【JavaEE初阶】 CSS相关属性,元素显示模式,盒模型,弹性布局,Chrome 调试工具||相关讲解
【JavaEE初阶】 CSS相关属性,元素显示模式,盒模型,弹性布局,Chrome 调试工具||相关讲解
|
20天前
|
移动开发 前端开发 JavaScript
H5+CSS3+JS逆向前置——5、DIV+CSS百分比布局
H5+CSS3+JS逆向前置——5、DIV+CSS百分比布局
19 0
|
23天前
|
前端开发 JavaScript API
|
1月前
|
前端开发 容器
CSS布局模式之Flex布局&Grid布局(三)
CSS布局模式之Flex布局&Grid布局