Home 前端/建站css 用设计排版的视角理解CSS的flexbox

用设计排版的视角理解CSS的flexbox

by Kevin
0 comment 131 views

一、什么是flexbox?

布局的传统解决方案主要是基于盒状模型,依赖 display 属性 + position属性 + float属性。随着步入CSS3时代,Flex 孕育而生,它可以轻松地将不同元素按照不同方向和不同顺序排列对齐,以更少的代码编写更易用和符合逻辑的前端页面,其背后的主要原理就是给特定容器以伸缩该容器内元素的能力从而最大化地利用可用空间的方法。flex布局将取代浮动布局,正或将成为CSS主流布局方法。

二、Flexbox主要概念

两个轴:主轴Main Axis ,交叉轴Cross Axis

一个容器:flex container

若干元素:flex items

三、flex container 上的属性:

1.flex-direction:决定主轴的方向(即项目的排列方向)

  • row 默认值 ,主轴为水平方向,起点在左端。
  • row-reverse ,主轴为水平方向,起点在右端
  • column ,主轴为垂直方向,起点在顶端。
  • column-reverse ,主轴为垂直方向,起点在底端。

2.flex-wrap:决定容器内项目是否可换行

  • nowrap 默认值 不可换行 ,所有元素都排在一条轴线上。
  • wrap 一条轴线排不下时换行,从左到右自上而下排。
  • wrap-reverse 一条轴线排不下时换行,从左到右自下而上排。

3.flex-flow: flex-direction 和 flex-wrap 的简写形式默认值row nowrap

4.justify-content:定义了项目在主轴的对齐分布方式。(下方详解)

5.align-items: 定义了项目在交叉轴上的对齐分布方式。(下方详解)

6.align-content: 定义了多根轴线的对齐方式, flex-wrap 非默认值 nowrap 时有效

  • stretch(默认值):轴线占满整个交叉轴。
  • flex-start 与交叉轴的起点对齐
  • flex-end 与交叉轴的终点对齐
  • center 交叉轴居中
  • space-between 与交叉轴两端对齐
  • space-around 与交叉轴两端对齐

四、以设计排版看flex布局(container):

1、当flex-direction:row

把justify-content类比成设计排版的水平对齐分布(主轴)

  • justify-content:flex-start 水平左分布 (默认值)
  • justify-content:flex-end 水平右分布
  • justify-content:center 水平居中分布
  • justify-content:space-between 两端对齐(无外边距)
  • justify-content:space-around 两端对齐(元素间距为两端元素外边距的2倍)
  • justify-content:space-evenly 两端对齐 (所有距离相同)

把align-items类比成设计排版的垂直对齐分布(交叉轴)

  • align-items:stretch;所有垂直拉伸到某个最长元素的长度(默认值)
  • align-items:flex-start;垂直顶对齐
  • align-items:flex-end;垂直底对齐
  • align-items:center;垂直居中对齐
  • align-items:baseline; 文字基线对齐
两端对齐+垂直顶对齐
两端对齐+垂直居中对齐
文字基线对齐

2、当flex- direction:column

把align-items类比成设计排版的水平对齐分布(交叉轴)

  • align-items:stretch;所有水平拉伸(默认值)
  • align-items:flex-start;水平左对齐
  • align-items:flex-end;水平右对齐
  • align-items:center;水平居中对齐
  • align-items:baseline; 文字基线水平居中对齐(效果同上)
所有水平拉伸(默认值)
水平左对齐
水平居中对齐

把justify-content类比成设计排版的垂直对齐分布(主轴)

  • justify-content:flex-start 垂直顶分布 (默认值)
  • justify-content:flex-end 垂直底分布
  • justify-content:center 垂直居中分布
  • justify-content:space-between 垂直两端对齐 (无外边距)
  • justify-content:space-around 垂直两端对齐 (元素间距为两端元素外边距的2倍)
  • justify-content:space-evenly 垂直两端对齐(所有距离相同)
垂直两端对齐+水平居中对齐

五、flex item上的属性

1.order :定义项目在容器中的排列顺序,数值越小,排列越靠前,默认值为 0

比0更小的负数

2.flex-grow :指定了flex容器中剩余空间的多少应该分配给项目(flex增长系数)默认值0。0-1

如果该值为1,则该元素占据剩余空间的全部

3.flex-shrink:指定了 flex 元素的收缩规则。flex 元素仅在默认宽度之和大于容器的时候才会发生收缩,其收缩的大小是依据 flex-shrink 的值,默认为1。

当值为0时,该元素绝对单位下不能收缩,50%即收缩到flex-basis一半大小。

4.flex-basis指定了 flex 元素在主轴方向上的初始大小。如果不使用  box-sizing 改变盒模型的话,那么这个属性就决定了 flex 元素的内容盒(content-box)的尺寸,默认值auto。

如果设置为20%,则该元素占整个内容盒的20%,也可用绝对单位px

5.flex属性是flex-growflex-shrink 和 flex-basis的简写,默认值为0 1 auto。后两个属性可选。默认为扩张,可收缩,自动大小。

flex:0 1 300px——-该元素不扩张,可压缩 ,300px宽

6.align-self 属性允许单个项目有与其他项目不一样的对齐方式,可覆盖align-items属性。

Related Articles

Leave a Comment