Java
MySQL
Python
大数据
前端
黑科技
    首页 > 互联网 > 前端 > 弹性Flex布局 深入理解,简单易懂

弹性Flex布局 深入理解,简单易懂

[导读]:Flex是Flexible Box的缩写,翻译成中文就是弹性盒子,用来为盒装模型提供最大的灵活性。任何一个容器都可以指定为Flex布局。 容器默认存在两根主轴:水平方向主轴(main axis)和垂直方向交叉轴(cross axis),默认项目按主轴排列。 mai...
Flex是Flexible Box的缩写,翻译成中文就是“弹性盒子”,用来为盒装模型提供最大的灵活性。任何一个容器都可以指定为Flex布局。
 
容器默认存在两根主轴:水平方向主轴(main axis)和垂直方向交叉轴(cross axis),默认项目按主轴排列。
 
main start/main end:主轴开始位置/结束位置;
cross start/cross end:交叉轴开始位置/结束位置;
main size/cross size:单个项目占据主轴/交叉轴的空间;
设置在容器上的属性有6种。
 
flex-direction
flex-wrap
flex-flow
justify-content
align-item
align-content
flex-direction:决定主轴的方向
 
row(默认):主轴水平方向,起点在左端;
row-reverse:主轴水平方向,起点在右端;
column:主轴垂直方向,起点在上边沿;
column-reserve:主轴垂直方向,起点在下边沿。
 
flex-wrap属性:定义换行情况
flex-wrap属性:设置是否换行和换行情况
 
有的时候,项目都排列在一条轴线上,但有可能一条轴线排不下。
 
 
<head>
  <style>
    #app{
      width: 300px;
      background-color: green;
      display: flex;
      flex-direction:row;
      flex-wrap: wrap ;
    }
    #app div{
      height: 100px;
      width: 100px;
      background-color: yellow;
    }
  </style>
</head>
<body>
  <div id="app">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
  </div>
</body>
 
flex-flow属性:flex-direction和flex-wrap的简写
 
 
justify-content属性:定义项目在主轴上的对齐方式。
 
align-content属性:定义多根轴线的对齐方式
align-content属性设置的前提:容器必须设置flex-wrap:··
 
如果项目只有一根轴线,该属性不起作用。
所以,容器必须设置flex-wrap:···;
 
 
子对象的设置
设置在项目上的属性也有6个。
 
order:order属性定义项目的排列顺序。数值越小,排列越靠前,默认为0。
 
flex-grow:该属性是指当子元素总宽度和比盒子宽度小的时候,子元素该如何瓜分父元素剩余宽度。
 
flex-shrink:当子元素总宽度和比盒子宽度大的时候,子元素该如何压缩自己适应父元素宽度。
 
flex-basis:指定了 flex 元素在主轴方向上的初始大小
 
flex:flex属性是flex-grow, flex-shrink 和 flex-basis的简写,默认值为0 1 auto
 
align-self:align-self属性允许单个项目有与其他项目不一样的对齐方式,可覆盖align-items属性。
 

本文来自投稿,不代表阿习进阶博客立场,如若转载,请注明出处:https://www.yanxias.com/qianduan/151.html

说点什么吧
  • 全部评论(0
    还没有评论,快来抢沙发吧!
点击这里给我发消息