flex布局常见属性

木易小熙

已于 2022-07-23 11:02:00 修改

阅读量351

点赞数 2

文章标签： css 前端 html

于 2022-07-23 11:01:09 首次发布

本文链接：https://blog.csdn.net/Wksycxy/article/details/125943155

版权

flex布局

常见父元素属性

flex-direction;设置主轴的方向

flex-wrap;设置项目是否换行

justify-content;项目沿主轴方向上的排列方式

align-content; 项目沿侧轴方向的排列方式

align-items;项目沿侧轴方向的排列方式 (没有敲错，没有敲错)

常见项目属性

flex;剩余空间占比

order设置子项自己的排列顺序

align-self;设置子元素自己在侧轴上的排列方式

通过给父盒子添加 display:flex 开启flex布局，来控制盒子的位置和排列方式
默认沿主轴（x）和交叉轴（y）的方向排列

常见父元素属性

flex-direction;设置主轴的方向

flex-direction: row;                  /*默认值从左到右*/

flex-direction: row-reverse;          /*从右到左*/

flex-direction: column;                /*从上到下*/

flex-direction: column-reverse;        /*从下到上*/

flex-wrap;设置项目是否换行

flex-wrap:nowarp;       /*默认值，不换行*/

flex-wrap:warp;       /*换行*/

justify-content;项目沿主轴方向上的排列方式

justify-content: flex-end;              /*主轴结束方向*/

justify-content: center;               /*居中对齐*/

justify-content: space-evenly;         /*平分空间*/

justify-content: space-between;        /*两端对齐*/

justify-content: space-around;        /*中间间距为两侧间距两倍*/

默认排序

justify-content: flex-end; /*主轴结束方向*/

justify-content: center; /*居中对齐*/

justify-content: space-evenly; /*平分空间*/

justify-content: space-between; /*两端对齐*/

justify-content: space-around; /*中间间距为两侧间距两倍*/

align-content; 项目沿侧轴方向的排列方式

属性与沿主轴方向的相同

注意使用时需要另加一个 flex-wrap:wrap; 属性, 否则不起作用

align-items;项目沿侧轴方向的排列方式 (没有敲错，没有敲错)

之前没注意这个属性，因为当需要二维布局时我一般都用的grid布局，并且是在需要用到侧轴布局时，用的也都是 align-content。今天才注意到这两个属性十分相似。至于区别，align-items不需要外加flex-wrap:wrap;属性

align-items:flex-start; /*默认值从上到下*/

align-items:flex-end;   /*从下到上*/

align-items:center;  /*挤在一起居中（垂直居中）*/

align-items:stretch;  /* 拉伸，，，子元素没有设置高度是才有效，但当子元素没有设置高度时，会自动拉伸，我感觉这个属性很鸡肋*/

常见项目属性

flex;剩余空间占比

这个属性非常好用，flex后跟数字表示占剩余空间的比例

flex:1;

felx:2;...

例如：

css

*{
    margin: 0;
    padding: 0;
}
.fbox{
    width: 1000px;
    height: 500px;
    background-color: aqua;
    margin: auto;
    display: flex;
    flex-wrap: wrap;
}
.zbox{
    width: 600px;
    background-color: pink;
    border: 1px solid #000;
    text-align: center;
}
.zbox1{
    flex: 1;
    background-color: rgb(15, 237, 15);
}

html

<body>
  <div class="fbox">
    <div class="zbox">1</div>
    <div class="zbox">2</div>
    <div class="zbox1">3</div>
  </div>
</body>

效果

order设置子项自己的排列顺序

order:1;

order:2;          /*数字越小，位置越靠前*/

例如将上册代码的css改为

.zbox{
    width: 600px;
    background-color: pink;
    border: 1px solid #000;
    text-align: center;
    order: 2;
}
.zbox1{
    flex: 1;
    background-color: rgb(15, 237, 15);
    order: 1;
}

效果变为

align-self;设置子元素自己在侧轴上的排列方式

可以理解为单独使用的align-items;属性，只不过作用对象从所有项目变为了项目本身。

1. auto 表示继承容器的 align-items 属性。（默认值）
2. flex-start 沿着交叉轴方向 起点 对齐（默认值）。
3. flex-end 沿着交叉轴方向 结尾 对齐。
4. center 沿着交叉轴方向 居中 对齐。
5. baseline 沿着交叉轴方向，按照项目内的文字对齐。
6. stretch 沿着交叉轴方向自动进行拉升到最大。

木易小熙

关注

2
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
flex布局常见属性

之前没注意这个属性，因为当需要二维布局时我一般都用的grid布局，并且是在需要用到侧轴布局时，用的也都是align-content。至于区别，align-items不需要外加flex-wrapwrap;justify-contentspace-around;/*中间间距为两侧间距两倍*/justify-contentflex-end;/*主轴结束方向*/justify-contentspace-between;justify-contentspace-evenly;.........
复制链接

扫一扫