关于flex

最新推荐文章于 2024-03-15 13:38:48 发布

coodingcc

最新推荐文章于 2024-03-15 13:38:48 发布

阅读量186

点赞数 1

分类专栏：前端 vue 文章标签： flex

本文链接：https://blog.csdn.net/cristina_song/article/details/87790930

版权

前端同时被 2 个专栏收录

93 篇文章 1 订阅

订阅专栏

vue

9 篇文章 0 订阅

订阅专栏

http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html?utm_source=tuicool
flex的属性：
（1）flex-direction:x轴排列
（2）flex-wrap：是否换行（默认不换行）
（3）flex-flow：（1）属性和（2）属性的简写，flex-flow:row wrap;
（4）justify-content:x轴对齐方式
（5）align-items：y轴排列
（6）align-content：y轴对齐方式
注意，设为 Flex 布局以后，子元素的float、clear和vertical-align属性将失效。

若干个小方干实现左对齐排列，使用flex布局

<!DOCTYPE html>
<html>
<head>
	<title>flex练习</title>
</head>
<style type="text/css">
	.father{
		width: 500px;
		height:500px;
		border: 1px solid black;
		box-sizing: border-box;
		display: flex;
		flex-wrap: wrap;
		flex-direction: row;
		justify-content: flex-start;
		/*定义多根轴线的对齐方式*/
		align-content: flex-start;
	}
	.child{
		width: 100px;
		height:100px;
		background-color: red;
		margin-top:10px;
		/*计算获得*/
		margin-left: 20px;
	}

</style>
<body>
<div class="father">
	<div class="child">111</div>
	<div class="child">222</div>
	<div class="child">333</div>
	<div class="child">444</div>
	<div class="child">555</div>
</div>
</body>
</html>

在这里插入图片描述

flex布局 justify-content：space-between; 解决最后一排数量不够自动向两端排列问题

在这里插入图片描述
方案1：父级添加after伪类法，解决最后一排数量不够两端分布的情况

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script src="https://cdn.bootcss.com/vue/2.6.8/vue.min.js"></script>

    <title>flex</title>

</head>
<body>
    <div class="app">
        <div class="tem-flex">
          <div class="tem-list" v-for="item in len">列表</div>
        </div>
    </div>
</body>
</html>
<script>
new Vue({
  el: '.app',
  data: {
    len : 14
  },
})
</script>
<style>
  .tem-flex{
    display: flex;
    flex-wrap: wrap;
    justify-content:space-between;
    text-align: justify;
  }
  /* 加上after伪类，解决最后一排数量不够两端分布的情况 */
  .tem-flex:after{
    content: '';
    width: 30%;
    border:1px solid transparent;
  }
  .tem-list{
    width:30%;
    border:1px solid #ff6600;
    margin-bottom: 10px;
  }
</style>

完美解决两端对齐布局混乱的情况

当然，这种解决方案只适合每列有3个的分布情况，如果布局每列有4个，5个，可参考方案2

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script src="https://cdn.bootcss.com/vue/2.6.8/vue.min.js"></script>

    <title>flex</title>

</head>
<body>
    <div class="app">
        <div class="tem-flex">
          <div class="tem-list" v-for="item in len">列表</div>
          <div class="list" v-for="item in (row-len%row)" v-if="len%row > 0"></div>
        </div>
    </div>
</body>
</html>
<script>
new Vue({
  el: '.app',
  data: {
    len : 14,
    row: 4
  },
})
</script>
<style>
  .tem-flex{
  display: flex;
  flex-wrap: wrap;
  justify-content:space-between;
  justify-items: center;
  text-align: justify;
}
.list{
  content: '';
  width: 20%;
  border:1px solid transparent;
  padding: 5px;
  overflow: hidden;
}
.tem-list{
  width:20%;
  border:1px solid #ff6600;
  margin-bottom: 10px;
  padding: 10px 5px;
  display: flex;
  justify-content: center;
}
</style>