美文网首页
flex布局使用

flex布局使用

作者: 我是帅气的石头 | 来源:发表于2019-04-26 16:43 被阅读0次

Flex是Flexible Box的缩写,意为”弹性布局”,用来为盒状模型提供最大的灵活性。

任何一个容器都可以指定为Flex布局。

.box{
  display: flex;
}

一,容器的属性

以下6个属性设置在容器上。

.flex-direction
.flex-wrap
.flex-flow
.justify-content
.align-items
.align-content

1,flex-direction属性

flex-direction属性决定主轴的方向(即项目的排列方向)。

.box {
  flex-direction: row | row-reverse | column | column-reverse;
}

row(默认值):主轴为水平方向,起点在左端。
row-reverse:主轴为水平方向,起点在右端。
column:主轴为垂直方向,起点在上沿。
column-reverse:主轴为垂直方向,起点在下沿。

2,flex-wrap属性

默认情况下,项目都排在一条线(又称”轴线”)上。flex-wrap属性定义,如果一条轴线排不下,如何换行。


image.png
.box{
  flex-wrap: nowrap | wrap | wrap-reverse;
}
image.png

3, flex-flow

flex-flow属性是flex-direction属性和flex-wrap属性的简写形式,默认值为row nowrap。

.box {
  flex-flow: <flex-direction> <flex-wrap>;
}

4,justify-content属性

justify-content属性定义了项目在主轴上的对齐方式。

.box {
  justify-content: flex-start | flex-end | center | space-between | space-around;
}

它可能取5个值,具体对齐方式与轴的方向有关。下面假设主轴为从左到右:
flex-start(默认值):左对齐
flex-end:右对齐
center: 居中
space-between:两端对齐,项目之间的间隔都相等。
space-around:每个项目两侧的间隔相等。所以,项目之间的间隔比项目与边框的间隔大一倍。


image.png

5,align-items属性

align-items属性定义项目在交叉轴上如何对齐。

.box {
  align-items: flex-start | flex-end | center | baseline | stretch;
}

它可能取5个值。具体的对齐方式与交叉轴的方向有关,下面假设交叉轴从上到下。
flex-start:交叉轴的起点对齐。
flex-end:交叉轴的终点对齐。
center:交叉轴的中点对齐。
baseline: 项目的第一行文字的基线对齐。
stretch(默认值):如果项目未设置高度或设为auto,将占满整个容器的高度。


image.png

6,align-content属性

align-content属性定义了多根轴线的对齐方式。如果项目只有一根轴线,该属性不起作用。

.box {
  align-content: flex-start | flex-end | center | space-between | space-around | stretch;
}

flex-start:与交叉轴的起点对齐。
flex-end:与交叉轴的终点对齐。
center:与交叉轴的中点对齐。
space-between:与交叉轴两端对齐,轴线之间的间隔平均分布。
space-around:每根轴线两侧的间隔都相等。所以,轴线之间的间隔比轴线与边框的间隔大一倍。
stretch(默认值):轴线占满整个交叉轴。

二,项目属性

以下6个属性设置在项目上。
order
flex-grow
flex-shrink
flex-basis
flex
align-self

1,order属性

order属性定义项目的排列顺序。数值越小,排列越靠前,默认为0。

.item {
  order: <integer>;
}
image.png

2,flex-grow属性

flex-grow属性定义项目的放大比例,默认为0,即如果存在剩余空间,也不放大。

.item {
  flex-grow: <number>; /* default 0 */
}
image.png

3,flex-shrink属性

flex-shrink属性定义了项目的缩小比例,默认为1,即如果空间不足,该项目将缩小。

.item {
  flex-shrink: <number>; /* default 1 */
}
image.png

4, flex-basis属性

flex-basis属性定义了在分配多余空间之前,项目占据的主轴空间(main size)。浏览器根据这个属性,计算主轴是否有多余空间。它的默认值为auto,即项目的本来大小。

.item {
  flex-basis: <length> | auto; /* default auto */
}

它可以设为跟width或height属性一样的值(比如350px),则项目将占据固定空间。

5,flex属性

flex属性是flex-grow, flex-shrink 和 flex-basis的简写,默认值为0 1 auto。后两个属性可选。

.item {
  flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
}

该属性有两个快捷值:auto (1 1 auto) 和 none (0 0 auto)。

建议优先使用这个属性,而不是单独写三个分离的属性,因为浏览器会推算相关值。

6, align-self属性

align-self属性允许单个项目有与其他项目不一样的对齐方式,可覆盖align-items属性。默认值为auto,表示继承父元素的align-items属性,如果没有父元素,则等同于stretch。

.item {
  align-self: auto | flex-start | flex-end | center | baseline | stretch;
}

三,例子demo

例子1

html

<div class="demo">
  <div class="inner">
    <p>这是一个测试这是一个测试这是一个测试这是一个测试这是一个测试</p>
  </div>
</div>

css

.demo{
  width: 500px;
  height: 300px;
  border: 1px solid purple;
  display: flex;                /*设置为flex布局*/
  justify-content: center;   /*水平居中*/
  align-items: center;     /*垂直居中*/
}
.inner{
  width: 160px;
  height: 160px;
  font-size: 26px;
  border: 1px solid red;
}

效果图


image.png

例子2 用flex布局制作导航栏

HTML代码

<ul>
 <li>音乐</li>
 <li>影视</li>
 <li>旅游</li>
</ul>

css

ul{
  display: flex;         
}
li{
  flex: 1;
  text-align: center;
  line-height: 100px;
}
image.png

例子3 卡片

image.png

HTML代码

<div class="demo">
   <div class="left"></div>
   <div class="right">
      <p>Iphone7 PLUS XXXXXXXXXX</p>
      <span>总人数99</span>
      <span>剩余人数33</span>
      <div class="btn">立即参与</div>
   </div>
</div>

css

.demo{
  display: flex;                /*设置为flex布局*/
  justify-content: space-around;
}
.demo > div{
  flex: none;
}
.left{
  width: 200px;
  height: 200px;
  background: #d4cdcd;
}
.right{
  width: 380px;
  height: 200px;
}

例子4 多列布局

image.png

HTML代码

<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>

css

.demo{
  width: 600px;
  height: 150px;
  border: 1px solid #b7b2b7;
  margin: 30px auto;
  padding-top: 17px;
  display: flex;                /*设置为flex布局*/
  justify-content: space-around;
}
.demo > div{
  flex: none;
}

例子5 固定百分比布局

HTML代码

<div class="demo">
   <div class="item item1"></div>
   <div class="item item2"></div>
   <div class="item item3"></div>
   <div class="item item4"></div>
</div>

(1)等分布局


image.png

css

.demo{
  display: flex;             
}
.item{
  flex: 1;
}

(2)某一个固定


image.png

css

.demo{
  display: flex;    
}
.item{
  flex: 1;
}
.item2{
  flex: 0 0 50%;
}

(3)某两个固定


image.png

css

.demo{
  display: flex;    
}
.item{
  flex: 1;
}
.item2{
  flex: 0 0 50%;
}
.item4{
  flex: 0 0 20%;
}

(4)圣杯布局,如图所示


image.png

HTML代码

<div class="demo">
   <div class="header">头部</div>
   <div class="body">
      <div class="left">left</div>
      <div class="center">center</div>
      <div class="right">right</div>
   </div>
   <div class="footer">底部</div>
</div>

css

.demo{
  display: flex;
  flex-direction: column;            
}
.demo div{
  flex: 1;
}
.body{
  display: flex;  
} 
.header,.footer,.left,.right{
  flex: 0 0 20%!important;
}

(5) 输入框布局,有时需要在输入框的前部添加提示,或者后部添加按钮,如图所示:


image.png

HTML代码

<div class="demo">
   <span class="tip"></span>
   <input type="text" name="" />
   <button>search</button>
</div>

css

.demo{
  display: flex;
}
input{
  flex:1;
}

(6)底部footer固定在底部


image.png

HTML代码

<div class="demo">
   <div class="main">这是主要内容</div>
   <div class="footer">这是底部</div>
</div>

css

.demo{
    display: flex;
    flex-direction: column;
}
.main{
    flex: 1;
}
.footer{
    width: 100%;
    height: 120px;
}

(8)流式布局 ,如下如所示:


image.png

HTML代码

<div class="demo">
   <div class="item"></div>
   <div class="item"></div>
   <div class="item"></div>
   <div class="item"></div>
</div>

css

.demo{
    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;
}

相关文章

  • flex布局

    兼容使用 块元素使用flex布局 行内元素使用flex布局 Webkit内核的浏览器使用flex布局(Safari...

  • [2020-08-10]css3中的常用几种布局

    div的水平垂直居中 flex布局,使用display: flex实现水平垂直居中 grid布局 使用grid布局...

  • flex布局

    简介 flex布局(Flexible布局,弹性布局)是在开发中经常使用的布局方式开启了flex布局的元素叫flex...

  • css3 flex布局 justify-content:spac

    flex布局最后一行左对齐 随着flex布局的流行,我们工作中也免不了用flex布局,在使用flex布局的时候,大...

  • flex布局

    1.flex布局 flex布局弹性布局,在移动端使用很多,在pc端应用也越来越多开启了flex布局的元素叫flex...

  • flex布局笔记

    Flex 布局 简介 flex 布局 (Flexible 布局,弹性盒子)是在小程序开发经常使用的布局方式 官方文...

  • flex布局

    flex布局意为弹性布局,任何一个容器都可以指定为flex布局,行内元素也可以使用flex布局display:fl...

  • ReactNative之Flex布局

    一般使用ReactNative开发App,一般都采用Flex布局,使用这套布局就非常快。Flex简介Flex又叫弹...

  • 小程序flex布局

    index.wxml index.wxss样式 主轴和交叉轴 未使用flex布局 1、使用flex布局 displ...

  • 三列布局之圣杯布局、双飞翼布局

    圣杯布局 双飞翼布局 使用flex弹性布局实现

网友评论

      本文标题:flex布局使用

      本文链接:https://www.haomeiwen.com/subject/ugqqnqtx.html