阅读 112

Flex布局

flex 布局

flex布局的优势

1、flex 布局的子元素不会脱离文档流,很好地遵从了“流的特性”。

2、flex 是一种现代的布局方式,是 W3C 第一次提供真正用于布局的 CSS 规范。 flex 非常提供了丰富的属性,非常灵活,让布局的实现更佳多样化,且方便易用。

flex的兼容性

不支持低版本的浏览器(IE9及以下的版本)

概念:弹性盒子、子元素

  • 弹性盒子:指的是使用 display:flexdisplay:inline-flex 声明的父容器

  • 子元素/弹性元素:指的是父容器里面的子元素们(父容器被声明为 flex 盒子的情况下)。

概念:主轴和侧轴

  • 主轴:flex容器的主轴,默认是水平方向,从左向右。

  • 侧轴:与主轴垂直的轴称作侧轴,默认是垂直方向,从上往下。

注:主轴和侧轴并不是固定不变的,可以通过 flex-direction 更换方向

弹性盒子

声明定义

使用 display:flexdisplay:inline-flex 声明一个父容器为弹性盒子。 注:display:inline-flex使用较少。

flex-direction 属性

flex-direction:用于设置盒子中子元素的排列方向。属性值可以是:

属性值描述
row从左到右水平排列子元素(默认值)
column从上到下垂直排列子元素
row-reverse从右向左排列子元素
column-reverse从下到上垂直排列子元素

flex-wrap 属性

flex-wrap:控制子元素溢出时的换行处理。

justify-content 属性

justify-content:控制子元素在主轴上的排列方式。

弹性元素

justify-content 属性

  • justify-content: flex-start; 设置子元素在主轴上的对齐方式。属性值可以是:
    • flex-start 从主轴的起点对齐(默认值)
    • flex-end 从主轴的终点对齐
    • center 居中对齐
    • space-around 在父盒子里平分
    • space-between 两端对齐 平分

align-items 属性

align-items:设置子元素在侧轴上的对齐方式。属性值可以是: - flex-start 从侧轴开始的方向对齐 - flex-end 从侧轴结束的方向对齐 - baseline 基线 默认同flex-start - center 中间对齐 - stretch 拉伸(默认值)

flex属性:设置子盒子的权重

文章分类
前端
文章标签