flew弹性布局

最新推荐文章于 2024-07-21 21:06:06 发布

qq_25462315

最新推荐文章于 2024-07-21 21:06:06 发布

阅读量5.4k

点赞数 1

分类专栏： flew布局文章标签： flew布局

本文链接：https://blog.csdn.net/qq_25462315/article/details/83784931

版权

flew布局专栏收录该内容

1 篇文章 0 订阅

订阅专栏

1.浮动带来的影响
如果父元素没有设置高度，子元素浮动的话，父元素的高度为0，其解决方法在父元素上添加overflow:hidden

<style>
    .container{
      border: 1px solid #000;
      overflow: hidden;
    }
    .son{
      width: 100px;
      height: 100px;
      background: #232358;
      border: 1px solid gold;
      float: left;
    }
</style>
 <div class="container">
  <div class="son"></div>
  <div class="son"></div>
  <div class="son"></div>
</div>

2.flew弹性盒子
(1). flex-direction属性决定主轴的方向（即项目的排列方向）。
flex-direction:row（默认值）：主轴为水平方向，起点在左端。
flex-direction:row-reverse：主轴为水平方向，起点在右端。
flex-direction:column：主轴为垂直方向，起点在上沿。
flex-direction:column-reverse：主轴为垂直方向，起点在下沿。
(2). flex-wrap属性如何换行
flex-wrap: nowrap ：不换行
flex-wrap: wrap ：换行，第一行在上面
flex-wrap: wrap-reverse ：换行，第一行在下面
(3).flex-flow属性是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap
(4).justify-content属性定义了项目在主轴上的对齐方式
justify-content:flex-start（默认值）：左对齐
justify-content:flex-end：右对齐
justify-content:center：居中
justify-content:space-between：两端对齐，项目之间的间隔都相等。
justify-content:space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。
(5).align-items属性定义项目在交叉轴上如何对齐
align-items: flex-start：交叉轴的起点对齐。
align-items:flex-end：交叉轴的终点对齐。
align-items:center：交叉轴的中点对齐。
align-items:baseline: 项目的第一行文字的基线对齐。
align-items:stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。
(6).align-content属性定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。(属性同上第五点)

注意，设为 Flex 布局以后，子元素的float、clear和vertical-align属性将失效。

<style>
   .container{
      border: 1px solid #000;
      display:flew ;/*父元素设置成伸缩盒子布局*/
      flex-direction:column;
    }
    .son{
      width: 100px;
      height: 100px;
      background: #232358;
      border: 1px solid gold;
    }
</style>
<div class="container">
  <div class="son"></div>
  <div class="son"></div>
  <div class="son"></div>
</div>

flex设置元素垂直居中对齐

<style>
.container{
  width: 500px;
  height: 300px;
  border: 1px solid purple;
  display: flex;                /*设置为flex布局*/
  justify-content: center;   /*水平居中*/
  align-items: center;     /*垂直居中*/
}
.son{
  width: 160px;
  height: 160px;
  font-size: 26px;
  border: 1px solid red;
}
</style>
<div class="container">
  <div class="son">
    <p>这是一个测试这是一个测试这是一个测试这是一个测试这是一个测试</p>
  </div>
</div>

用flex布局制作导航栏

<style>
ul{
  display: flex;         
}
li{
  flex: 1;
  text-align: center;
  line-height: 100px;
}
</style>
<ul>
 <li>音乐</li>
 <li>影视</li>
 <li>旅游</li>
</ul>

做成左图右文字的样式

<style>
.container{
  display: flex;                /*设置为flex布局*/
  justify-content: space-around;
}
.demo > div{
  flex: none;
}
.left{
  width: 200px;
  height: 200px;
  background: #d4cdcd;
}
.right{
  width: 380px;
  height: 200px;
}
</style>
<div class="container">
   <div class="left"></div>
   <div class="right">
      <p>Iphone7 PLUS XXXXXXXXXX</p>
      <span>总人数99</span>
      <span>剩余人数33</span>
      <div class="btn">立即参与</div>
   </div>
</div>

多列布局

<style>
.container{
  width: 600px;
  height: 150px;
  border: 1px solid #b7b2b7;
  margin: 30px auto;
  padding-top: 17px;
  display: flex;                /*设置为flex布局*/
  justify-content: space-around;
}
.container> div{
  flex: none;
}
</style>
<div class="demo">
   <div class="left"></div>
   <div class="center">
      <p>description</p>
      <p>description</p>
      <p>description</p>
      <span>description</span>
   </div>
   <div class="btn">确认</div>
   <div class="btn">取消</div>
</div>

固定百分比布局
(1) 等分布局：

<style>
.container{
  display: flex;             
}
.item{
  flex: 1;
}
</style>
<div class="container">
   <div class="item item1"></div>
   <div class="item item2"></div>
   <div class="item item3"></div>
   <div class="item item4"></div>
</div>

（2）某一个固定

<style>
.container{
  display: flex;    
}
.item{
  flex: 1;
}
.item2{
  flex: 0 0 50%;
}
</style>
<div class="container">
   <div class="item item1"></div>
   <div class="item item2"></div>
   <div class="item item3"></div>
   <div class="item item4"></div>
</div>

（3）某两个固定

<style>
.container{
  display: flex;    
}
.item{
  flex: 1;
}
.item2{
  flex: 0 0 50%;
}
.item4{
  flex: 0 0 20%;
}
</style>
<div class="container">
   <div class="item item1"></div>
   <div class="item item2"></div>
   <div class="item item3"></div>
   <div class="item item4"></div>
</div>

（4）三个固定

<style>
.container{
  display: flex;    
}
.item{
  flex: 1;
}
.item1{
  flex: 0 0 10%;
}
.item2{
  flex: 0 0 50%;
}
.item4{
  flex: 0 0 20%;
}
</style>
<div class="container">
   <div class="item item1"></div>
   <div class="item item2"></div>
   <div class="item item3"></div>
   <div class="item item4"></div>
</div>

圣杯布局

<style>
.container{
  display: flex;
  flex-direction: column;            
}
.container div{
  flex: 1;
}
.main{
  display: flex;  
} 
.header,.footer,.left,.right{
  flex: 0 0 20%!important;
}
</style>
<div class="container">
   <div class="header">头部</div>
   <div class="main">
      <div class="left">left</div>
      <div class="center">center</div>
      <div class="right">right</div>
   </div>
   <div class="footer">底部</div>
</div>

输入框布局，有时需要在输入框的前部添加提示，或者后部添加按钮

<style>
	.container{
	  display: flex;
	}
	input{
	  flex:1;
	}
</style>
<div class="container">
   <span class="tip"></span>
   <input type="text" name="" />
   <button>search</button>
</div>

页面会经常用到固定的底栏，但是当页面内容过少时，footer会到页面中间，下面用flex来解决

<style>
.container{
    display: flex;
    flex-direction: column;
}
.main{
    flex: 1;
}
.footer{
    width: 100%;
    height: 120px;
}
</style>
<div class="container">
   <div class="main">这是主要内容</div>
   <div class="footer">这是底部</div>
</div>

流式布局

<style>
.container{
    width: 258px;
    height: 300px;
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
}
.item{
    flex: 0 0 33.333333%;
    height: 80px;
    box-sizing: border-box;
}
</style>
<div class="container">
   <div class="item"></div>
   <div class="item"></div>
   <div class="item"></div>
   <div class="item"></div>
</div>