1. 首页
  2. CSS

flex弹性布局

以下是弹性布局的一些知识点,很简单,易懂!

取值:

flex:当前元素充当弹性布局的容器,并且本身以块级元素显示。

inline-flex:当前元素充当弹性布局的容器,并且本身以行内元素显示。

概念:

  • 容器:容纳弹性布局中子元素的父元素。
  • 项目:容器中的子元素

注意:元素一旦变为弹性布局的元素后,float,clear,vertical-align,text-align都失效,定位属性是有效的!接下来就是弹性布局的核心:弹性布局的属性。弹性布局的属性分为容器的属性和项目的属性。

容器的属性:

flex-direction:定义容器的主轴方向

  • row 默认,主轴水平,从左到右
  • row-reverse主轴水平,从右到左
  • column主轴垂直,从上到下
  • column-reverse主轴垂直,从下到上

flex-wrap:如果项目在容器中一行显示不下的方式

  • norwap:默认不换行,项目自压缩
  • wrap:换行
  • wrap-reverse:项目在交叉轴上的换行
  • flex-flow:以上两个属性的简写,取值有两个

justify-content:项目在主轴方向上的对其方式

  • flex-start:在轴的起点对齐
  • flex-end:末尾段对齐
  • center:居中对齐
  • space-between:项目与项目之间的距离相等
  • space-around:项目两侧的剩余空间相等

align-items:项目交叉轴的对齐方式

  • flex-start:在轴的起点对齐
  • flex-end:末尾段对齐
  • center:居中对齐
  • baseline:基线对齐
  • stretch:如何项目未设置高度,将占满整个容器

align-content:如果有多跟轴线(需要换行),轴线的对齐方式

  • flex-start:在轴的起点对齐
  • flex-end:末尾段对齐
  • center:居中对齐
  • space-between:项目与项目之间的距离相等
  • space-around:项目两侧的剩余空间相等
  • stretch:占满整个轴线

项目的属性:

order:顺序,取值为整数,默认所有项目取值为0,取值越小越往前。

flex-grow:如果容器有剩余空间,定义项目的放大比例,将剩余空间分配给具有此属性的元素,按比例分配。

flex-shrink:如果容器有空间不足,定义项目的缩小比例。默认为1,取值为0,不压缩。

flex-basis:定义在主轴上的大小,可以覆盖width/height,默认为auto。

flex:以上3个属性的综合

align-self:设置当前这个项目的对齐方式,可以覆盖align-items

  • flex-start:在轴的起点对齐
  • flex-end:末尾段对齐
  • center:居中对齐
  • baseline:基线对齐
  • stretch:如何项目未设置高度,将占满整个容器

本文来自挚友阳光,本站一部分文章不代表本站立场,不妥请联系本站删除,如若转载,请注明出处:https://www.linstudy.com/article/38.html