关注互联网应用及运维技术的个人博客

Flex弹性布局基础属性

弹性布局可以简洁、完整、响应式的实现各种页面布局。

Flexbox主要功能:

  1. 屏幕和浏览器窗口大小变化也可以灵活调整布局
  2. 指定伸缩元素沿着主轴或者侧轴,按照一定比例分配额外的空间,调整伸缩元素的大小
  3. 指定伸缩元素沿着主轴或者侧轴,把伸缩元素额外空间分配到伸缩元素之前、之后和之间
  4. 控制元素在页面上的布局方向
  5. 指定如何将垂直于元素布局轴的额外空间分配到该元素的周边
  6. 按照不同文档对象模型(DOM),指定排序方式对屏幕上元素重新排序【浏览器渲染中不按照文档流先后顺序重排伸缩元素】

主轴和侧轴

用户沿着一个伸缩容器的主轴配置伸缩元素,主轴是水平还是垂直的取决于justify-content属性

只需要在父元素设置为flex布局即可:display:felx或者display:inline-flex。那其子元素的float、clear和vertical-align的属性就无效,父元素成为flex容器,就默认了父容器里面只有一行。 html:

    <div class="wrapper">
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
        <div>5</div>
        <div>6</div>
        <div>7</div>
    </div>

css:

.wrapper {
    display: flex;
    /* 设置主轴的方向 column垂直、flex水平*/
    flex-direction: column;

}

.wrapper div {
    width: 100px;
    height: 100px;
    text-align: center;
    line-height: 100px;
    background: red;
    color: #ffffff;
    margin: 10px;
}

flex容器有6个属性:

属性说明
flex-direction决定了弹性容器子元素的排列方式
flex-wrap设置了弹性容器超出时,是否换行
flex-flowflex-direction 和 flex-wrap 的简写
align-items设置弹性容器的子元素在纵轴方向的对齐方式
align-content和align-items,但不设置子元素对齐,只是设置行对齐
justify-content设置弹性容器子元素在主轴(横轴)方向上的对齐方式
1、flex-direction:决定主轴的方向,就是子元素的排列方向。在一个容器内无非就是四种排列方向:

第一种起点在左端的水平方向,则属性值为row,也是flex-direction属性的默认值;

第二种就是起点在右端的水平方向,则属性值为row-reverse

第三种是起点在上端的垂直方向,则属性值是column;

第四种是起点在下端的垂直方向,则属性值是column-reverse

flex-direction:row || row-reverse || column || column-reverse
2、flex-wrap:在默认的情况下,flex容器的子元素的是排列成一行的,flex-wrap属性定义在一行排不完时,如何换行,是否换行。有三个属性值:

nowrap:不换行

wrap:换行 ,多余的子元素排在第一行的下方

wrap-reverse:换行,多余的子元素排在第一行的上方。

flex-wrap:wrap  || wrap-reverse || nowrap
3、flex-flow:是flex-direction属性和flex-wrap属性的简写,默认值:row

nowrap 。

第一个属性值表示flex-direction属性值,第二个属性值表示flex-wrap属性值。

flex-flow:flex wrap
4、justify-content:该属性定义了子元素在主轴方向的对齐方式,有五个属性值供选择:
属性值描述
flex-start默认值,左对齐
flex-end右对齐
center居中
space-between两端对齐
space-around每个子元素对两侧的间距相等,那么每两个子元素的间距是子元素与边框间距的两倍。

5、侧轴对齐align-items和align-self:定义子元素在侧轴上的对齐方式,有五个属性值:
属性值描述
flex-start侧轴起点对齐
flex-end侧轴终点对齐
center侧轴中点对齐
baseline就是子元素的第一行文字基线对齐
stretch默认值,若是子元素没有设置高度或者是auto的话,那子元素就沾满容器的高度
6、align-content(堆栈伸缩行):定义了多轴对齐方式,若是子元素只有一根轴线的话,align-content属性就不起作用了,有6个属性值:
属性值描述
flex-start与交叉轴的起点对齐
flex-end与交叉轴的终点对齐
center与交叉轴的中点对齐
space-between与交叉轴两端对齐,轴线之间的间隔平均分布
space-around每根轴线两侧的间距相等。
stretch默认值,轴线占满整个交叉轴
伸缩性 flex

伸缩容器按照比例给各个伸缩元素分配额外空间

对齐的不是伸缩元素,而是伸缩行

flex-grow:1;//每一个伸缩元素平均分配额外空间,如果设置为2,那么该元素所占的额外空间是其他元素的2倍
flex-shrink:1;//定义元素的收缩能力
.wrapper {
    display: flex;
   border: 1px solid red;
}

.wrapper div {
    width: 100px;
    height: 100px;
    text-align: center;
    line-height: 100px;
    background: red;
    color: #ffffff;
    margin: 10px;
}

.wrapper div:nth-child(1){
    flex: 1;
}
.wrapper div:nth-child(2){
    flex: 2;
}
.wrapper >div:nth-child(3){
    flex: 3;
}

子元素有六个属性可以设置:

order:定义了子元素的排列顺序,数值越小,就越是靠前

flex-grow:定义子元素放大的比例,默认值是0

flex-shrink:定义了子元素的缩小比例,默认值是1,就是剩余空间不足,该子元素就会缩小,若有一个子元素 flex-shrink属性设置为0,其他都是1的话,那么在剩余空间不足的时候,该子元素不变,其他子元素等比例缩小

flex-basis:定义了子元素在分配剩余空间的时候,该子元素占据主轴的空间,默认值auto,就是该子元素本来的空间大小,也可以设置成具体的数值(200px),表示该子元素的固定空间大小。

flex:是flex-grow, flex-shrink 和 flex-basis属性的简写,默认值是:0 1 auto。若是设置为auto,则表示为 1 1 auto;设置为none,则表示为 0 0 auto

align-self:定义了该元素与其他元素的不一样的对齐方式,覆盖了align-items属性,默认值auto,表示继承父元素的align-items的属性值,若没有父元素,则是等同于stretch。flex-start | flex-end | center | baseline | stretch都与align-items属性完全一致。

赞(0)
未经允许不得转载:飞天狒狒 » Flex弹性布局基础属性

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址