前端布局-flex

1. 简介

Flex 布局,可以简便、完整、响应式地实现各种页面布局。目前,它已经得到了所有浏览器的支持。
flex是一种一维的布局,一次只能处理一行或一列。作为对比的是grid布局,它是二维布局,可以同时处理行和列上的布局(稍后会写另一篇笔记)。
任何一个容器都可以指定为 Flex 布局。设为 Flex 布局以后,容器中的直系子元素就会变成flex元素。flex元素的float、clear和vertical-align属性将失效。

item1
item2

2.属性介绍

2.1 容器属性

.flex {
  display: flex | inline-flex;
  flex-direction: row | row-reverse | column | column-reverse; /*决定主轴的方向(即项目的排列方向),默认为row*/
  flex-wrap: nowrap | wrap | wrap-reverse;/*如果一条轴线排不下,如何换行,默认为nowrap*/
  flex-flow:   || ;/*flex-direction和flex-wrap的简写,默认为row nowrap*/
  justify-content: flex-start | flex-end | center | space-between | space-around;/*项目在主轴上的对齐方式,默认flex-start*/
  align-items: flex-start | flex-end | center | baseline | stretch;/*项目在交叉轴上的对齐方式,默认stretch*/
  align-content: flex-start | flex-end | center | space-between | space-around | stretch;/*多根主轴的对齐方式。若只有一根主轴,属性无效,默认stretch*/
}

2.2 子元素属性

.item {
  order: ; /*项目的排列顺序。数值越小,排列越靠前,默认为0*/
  flex-grow: ; /* 项目的放大比例,默认为0,即如果存在剩余空间,也不放大*/
  flex-shrink: ; /*项目的缩小比例,默认为1,即如果空间不足,该项目将缩小*/
  flex-basis:  | auto;/*在分配多余空间之前,项目占据的主轴空间。浏览器根据这个属性,计算主轴是否有多余空间。它的默认值为auto,即项目内容的尺寸。它可以设为跟width或height属性一样的值(比如350px),则项目将占据固定空间*/
  flex: none | auto | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]; /*是flex-grow,flex-shrink,flex-basis的简写,默认是0 1 auto。none等同于0 0 auto,auto等同于1 1 auto*/
  align-self: auto | flex-start | flex-end | center | baseline | stretch;/*设置单个项目的对齐方式,可覆盖align-items属性,默认为auto,表示继承父元素的align-items属性,若没有父元素,则等同于stretch*/
}

flex元素默认行为即:

  • 元素排列为一行(flex-direction为row)
  • 元素从主轴的起始线开始(justify-content为flex-start)
  • 元素不会在主维度方向拉伸,但是可以缩小(flex-grow为0,flex-shrink为1)
  • 元素被拉伸来填充交叉轴大小(align-items为stretch)
  • flex-basis为auto
  • flex-wrap为nowrap

3.常用效果实现

前端布局-flex_第1张图片
左侧宽固定,右侧弹性,高度不固定

left fix 50px
right auto
上下左右居中
上下左右居中
导航条
  

前端布局-flex_第2张图片
圣杯布局
header
content
left
right
前端布局-flex_第3张图片
骰子
  

示例代码

参考:阮一峰老师的教程:
Flex 布局教程:语法篇
Flex 布局教程:实例篇
使用自动的外边距在主轴上对齐

你可能感兴趣的