flex弹性盒子

最新推荐文章于 2024-09-11 20:31:47 发布

weixin_70820910

最新推荐文章于 2024-09-11 20:31:47 发布

阅读量109

点赞数

文章标签： css css3

本文链接：https://blog.csdn.net/weixin_70820910/article/details/129824839

版权

flex弹性盒的概念

弹性盒是一种用于按行或者按列布局元素的一维布局方法，元素可以膨胀以填充额外的空间，缩小以适应更小的空间

以下的属性是添加给父元素的

1、flex-direction -- 改变轴的方向

row 默认值默认沿着x 轴排版
row-reverse -- 沿着x 轴右边排版
column -- 沿着xy轴从上到下排版
column-reverse -- 沿着xy轴从下到上排版

<style>
.main {
    width: 500px;
    height: 500px;
    background: skyblue;
    /* 变成弹性盒 -- 让元素沿着主轴排列（水平排列）
    1、如果盒子变成了弹性盒，浮动属性会失效
    */
    display: flex;

    /* 默认值是 row  */
    /* flex-direction: row; */
    /* 沿着x 轴右边排版 */
    /* flex-direction: row-reverse; */
    /* 沿着xy轴从上到下排版 */
    /* flex-direction: column; */
    /* 沿着xy轴从下到上排版 */
    flex-direction: column-reverse;

  /*   
    总结：
    1、给父元素添加  display: flex;  子元素就具备了弹性盒的功能
    2、给父元素设置 flex-direction 可以更改子元素排版的主轴是x轴还是 y 轴 
*/
}

.main div {
    width: 100px;
    height: 400px;
    background-color: red;
    font-size: 20px;
}
</style>
</head>

<body>
<div class="main">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
</body>

2、flex-wrap 换行与缩写

注意：弹性盒子的宽度是自动变化的，如果不做设置，弹性布局子元素不会溢出，只有在足够多的情况下才可以溢出

取值：

nowrap 默认值不换行
wrap 换行加入的是两行，会把父元素分为对等的两部分，子元素在每一个部分中都是顶端对齐。依次类推
wrap-reverse:反转折行

<style>
.main {
    width: 500px;
    height: 500px;
    background: skyblue;
    display: flex;
    /* flex-wrap: nowrap; */
    /* flex-wrap: wrap; */
    flex-wrap: wrap-reverse;
}

/* 
1、如果子元素有高度 子元素正常显示高度 如果子元素没有高度，
那么，子元素的高度就是父元素的高度（平均分配的时候，是父元素中每一份的高度）
2、如果子元素没有宽度，子元素的宽度就是内容撑开的宽度
*/

.main div {
    width: 100px;
    height: 400px;
    background-color: red;
    font-size: 20px;
}
</style>
</head>

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

2.1 改变轴和换行结合起来使用

.main {
    width: 500px;
    height: 500px;
    background: skyblue;
    display: flex;
    /* 主轴和换行结合使用 */
    flex-direction: column-reverse;
    flex-wrap: wrap;
    // 注意：并不适合列的自适应
}

简写

/* 简写 */
flex-flow: column-reverse wrap;

3、justify-content -- 主轴的对齐方式 -- 针对某一个元素

flex-start 默认在主轴的默认对齐方式
flex-end 在主轴的末尾开始对齐
center 在主轴的中间对齐
space-round 在主轴上平均分配空间
space-between 在主轴上的两端有两个元素分别对齐，剩余元素平均分配剩余空间
space-evenly 所有的元素平均分配剩余空间

.main {
    width: 500px;
    height: 500px;
    background: skyblue;
    display: flex;

    /* - flex-start 默认 在主轴的默认对齐方式  */
    /* justify-content: flex-start; */

    /* - flex-end 在主轴的末尾开始对齐  */
    /* justify-content: flex-end; */

    /* - center 在主轴的中间对齐  */
    /* justify-content: center; */

    /* - space-round 在主轴上平均分配空间  */
    /* justify-content: space-around; */

    /* - space-between 在主轴上的两端有两个元素分别对齐，剩余元素平均分配剩余空间  */
    /* justify-content: space-between; */

    /* - space-evenly 所有的元素平均分配剩余空间  */
    justify-content: space-evenly;

}

4、交叉轴对齐 -- align-content -- 针对的是整体

stretch 默认值
flex-start 在主轴默认对齐方式
flex-end 在主轴的末尾开始对齐
center 在主轴的中间对齐
space-round 在主轴上平均分配空间
space-between 在主轴上的两端有两个元素分别对齐，剩余元素平均分配剩余空间
space-evenly 所有的元素平均分配剩余空间

.main {
    width: 500px;
    height: 500px;
    background: skyblue;
    display: flex;

    flex-wrap: wrap;
    /* 只有一行不换行的情况下，align-content是不生效的  其实就是一个多行的排列的方式 */
    /* - stretch  默认值  */
    /* align-content: stretch; */
    /* - flex-start  在主轴默认对齐方式 */
    /* align-content: flex-start; */

    /* - flex-end 在主轴的末尾开始对齐 */
    /* align-content: flex-end; */

    /* - center  在主轴的中间对齐 */
    /* align-content: center; */

    /* - space-round  在主轴上平均分配空间 */
    /* align-content: space-around; */

    /* - space-between 在主轴上的两端有两个元素分别对齐，剩余元素平均分配剩余空间 */
    /* align-content: space-between; */

    /* - space-evenly  所有的元素平均分配剩余空间 */
    align-content: space-evenly;

}

5、algin-items -- 针对行

stretch 默认值
flex-start 在主轴默认对齐方式
flex-end 在主轴的末尾开始对齐
center 在主轴的中间对齐
baseline 基线对齐

.main {
    width: 500px;
    border: 1px solid #000;
    display: flex;

    /* 注意：不换行也是不生效的 */
    /* - stretch  默认值  */
    /* align-items: stretch; */
    /* - flex-start  在主轴默认对齐方式 */
    /* align-items: flex-start; */
    /* - flex-end 在主轴的末尾开始对齐 */
    /* align-items: flex-end; */
    /* - center  在主轴的中间对齐 */
    /* align-items: center; */
    /* - baseline  基线对齐 */
    align-items: baseline;
}

6、内联(行元素)与块的上下左右剧中布局

<style>
/* 第一种 文字水平剧中 */
/*  .box{
    width: 300px;
    height: 300px;
    background-color: skyblue;
    display: flex;
    align-items: center;
} */

/* 第二种方式 */
/* .box{
    width: 300px;
    height: 300px;
    background-color: skyblue;
    display: flex;
    flex-wrap: wrap;
    align-content: center;
}
*/
/* 第三种 行高  -- 针对一行比较好用  多行不合适 */
/*  .box{
    width: 300px;
    height: 300px;
    background-color: skyblue;
    line-height: 300px;
}
*/

/* 第四种 display: table-cell; */
/*  .box {
    width: 300px;
    height: 300px;
    background-color: skyblue;
    display: table-cell;  
    vertical-align: middle;
} */

/* 块元素剧中 */
/*  .box{
    width: 300px;
    height: 200px;
    background-color: skyblue;
    display: flex;
    justify-content: center;
    align-items: center;
}
.box div{
    width: 100px;
    height: 100px;
    background-color: blue;
} */

/*  .box {
    width: 300px;
    height: 200px;
    background-color: skyblue;
    display: flex;
    position: relative;
}

.box div {
    width: 100px;
    height: 100px;
    background-color: blue;
    margin: auto;
} */


.box {
    width: 300px;
    height: 200px;
    background-color: skyblue;
    position: relative;
}

.box div {
    width: 100px;
    height: 100px;
    background-color: blue;
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0; 
   margin: auto;
}

/* 定位+外边距  
定位+动画中的位移 */
</style>
</head>

<body>
<!--  <div class="box">
测试文字测试文字测试
测试文字测试文字测试
测试文字测试文字测试
测试文字测试文字测试
测试文字测试文字测试
测试文字测试文字测试
测试文字测试文字测试
测试文字测试文字测试
测试文字测试文字测试
测试文字测试文字测试
测试文字测试文字测试

</div> -->

<div class="box">
<div></div>
</div>
</body>

7、不定向剧中布局

比如轮播图中的分页按钮

<style>
/* 弹性盒 */
/*    .box{
    width: 300px;
    height: 150px;
    background-color: skyblue;
    display: flex;
    justify-content: center;
    align-items: flex-end;
}
.box div{
    width: 30px;
    height: 30px;
    background-color: red;
    border-radius: 50%;
    margin: 5px;
} */

/* 普通方式 */
.box {
    width: 300px;
    height: 150px;
    background-color: skyblue;
    position: relative;
}
.box section{
    text-align: center;
    width: 100%;
    position: absolute;
    bottom: 0;
}

.box div {
    width: 30px;
    height: 30px;
    background-color: red;
    border-radius: 50%;
    display: inline-block;
    margin: 5px;
}
</style>
</head>

<body>
<!--  <div class="box">
<div>1</div>
<div>2</div>
<div>3</div>
</div> -->

<div class="box">
<section>
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>1</div>
    <div>2</div>
    <div>3</div>
</section>
</div>
</body>

8、均分列布局

比如微信聊天窗口列表的菜单布局

<style>
/* 弹性盒 */
/*  .main{
    height: 200px;
    background-color: skyblue;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    padding: 0 20px;
}
.main div{
    width: 30px;
    height: 30px;
    background-color: red;
    border-radius: 50%;
} */

/* 普通方式 -- 微调*/
.main {
    width: 500px;
    height: 200px;
    background-color: skyblue;
    overflow: hidden;
    padding: 0 20px;
    box-sizing: border-box;
}

.main section {
    width: 600px;
}

.main div {
    width: 30px;
    height: 30px;
    background-color: red;
    border-radius: 50%;
    float: left;
    margin-right: 70px;
}
</style>
</head>

<body>
<!--  <div class="main">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div> -->

<div class="main">
<section>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
</section>
</div>
</body>

9、子项分组布局

<style>
/*  .main{
    height: 200px;
    background-color: skyblue;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.main div:nth-of-type(2){
    display: flex;
    margin-left: 10px;
}
.main .box{
    width: 50px;
    height: 100px;
    background-color: blue;
} */



.main {
    height: 200px;
    background-color: skyblue;
    display: flex;
    align-items: center;
}
.main div{
    width: 50px;
    height: 50px;
    background-color: red;
    margin-right: 10px;
}
.main div:nth-of-type(3){
    margin-right: auto;
}

.main div:nth-of-type(6){
    margin-right: auto;
}


</style>
</head>

<body>
<!-- <div class="main">
<div class="box">1</div>
<div>
    <div class="box">2</div>
    <div class="box">3</div>
</div>
</div> -->


<div class="main">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
</div>
</body>