webveuje/csspress/4.flex.md

flex

flex 意为弹性盒子，用来为盒模型提供最大的灵活性

flex 使用

任何一个元素都能被指定为flex 容器

/*
	选中元素为块级元素时
*/
display:flex


/*
	选中元素为内联元素时
*/
display:inline-flex

基本概念

通过display:flex 定义的元素称为容器，他包含的元素是容器成员，称为”项目“

容器默认存在两个轴，水平主轴和垂直的交叉轴

水平主轴的起点叫做 main start 结束位置叫做 main end

垂直交叉轴的起点叫做 cross start 结束位置叫做 cross end

容器的属性

• flex-direction 声明容器使用的轴是水平的还是垂直的
  • row 水平
  • column 垂直
• justify-content 声明排列的方式
  • center 居中
  • space-around 每个项目两侧的间隔相等 项目到边框有间距
  • space-between 两端对齐 项目之间的间隔都相等
• align-items 定义项目在交叉轴上的排列方式
  • center 居中
  • flex-start 交叉轴起点对齐（拓展）
  • flex-end 交叉轴终点对齐
  • baseline 第一行文字的基线对齐
  • stretch 默认占满整个容器的高度