码迷,mamicode.com
首页 > 其他好文 > 详细

flex布局

时间:2019-08-26 09:58:21      阅读:66      评论:0      收藏:0      [点我收藏+]

标签:ace   比例   剩余空间   ali   简单   语法   定义   art   dir   

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

语法:属性:display

 

取值:

  • 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:如何项目未设置高度,将占满整个容器

flex布局

标签:ace   比例   剩余空间   ali   简单   语法   定义   art   dir   

原文地址:https://www.cnblogs.com/lee1-w/p/11410449.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!