Flex --笔记

一、Flex布局介绍

Flexible Box的缩写，表示布局可以弹性布局，能为盒状模型提供最大的灵活性

二、基本概念

1. 父容器：采用flex布局的元素被称为父容器
2. 项目：采用flex布局下的子元素标签被称为项目

三、常用属性

1. 父容器

   • display: felx  //声明父元素是flex布局
     

   • flex-direction 声明父元素下的项目在容器主轴的方向

     • row 表示水平方向，由左到右
     • row-reverse 表示水平方向，由右到左
     • column 表示垂直方向，由上到下
     • column-reverse 表示垂直方向，由下到上

   • flex-wrap 声明项目在父元素一行无法完全显示的时候应该如何处理

     • nowrap 表示不换行
     • wrap 正常换行
     • wrap-reverse 向上换行

   • justify-content 声明项目在父元素水平方向的对齐方式

     • flex-start 左对齐
     • flex-end 右对齐
     • center 居中对齐
     • space-between 两端对齐
     • space-around 每个项目两侧的间距相等

   • align-items 声明项目在父元素垂直方向的对齐方式

     • flex-start 垂直方向的由上到下
     • flex-end 垂直方向由下到上
     • center 居中对齐
     • baseline 与项目的第一行文字的基线对齐
     • stretch 如果项目没有设置高度或者高度为auto，将沾满整个容器的高度

2. 项目

   • 自定义项目内属性