Flex 布局

作者: 这里王工头 | 来源:发表于2019-02-01 12:55 被阅读0次

flex布局
初见FLEX
Flex 布局教程
css flex布局详解
Flex
flex布局学习笔记
6Flex 布局
css flex
Flex布局（语法篇）
Day02_flex布局

欢迎访问我的博客https://qqqww.com/，祝所有码农同胞们早日走上人生巅峰，迎娶白富美~~

1 Flex 布局是什么？

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

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

.box{
display: flex;
}

行内元素也可以使用 Flex 布局。

.box{
display: inline-flex;
}

Webkit 内核的浏览器，必须加上-webkit前缀。

.box{
display: -webkit-flex; /* Safari */
display: flex;
}

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

2 基本概念

采用 Flex 布局的元素，称为 Flex 容器（flex container），简称"容器"。它的所有子元素自动成为容器成员，称为 Flex 项目（flex item），简称"项目"。

容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）。主轴的开始位置（与边框的交叉点）叫做main start，结束位置叫做main end；交叉轴的开始位置叫做cross start，结束位置叫做cross end。

项目默认沿主轴排列。单个项目占据的主轴空间叫做main size，占据的交叉轴空间叫做cross size。

2.1 案例

当一个布局需要自适应或者，一边固定宽度，其他自适应的情况下，使用flex布局

当想要使用flex布局的时候，找到其父元素，给父元素的类添加display:flex即可，在固定宽度的位置固定宽度，其他需要自适应的兄弟元素，分配flex，意思就是父盒子总宽度 - 固定宽度为剩余总宽度，把剩余需要自适应的兄弟元素按照需要的比例去分配剩余总宽度，案例代码如下：

案例一：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Flex布局1</title>
    <style type="text/css">
        /*
            使用 flex 流程
                1.设计 DOM 结构
                2.将父盒子设置为伸缩盒子  display: flex;
                3.固定一边宽度，另一边设置flex: 1;就实现了
         */
        html, body {
            height: 100%;
        }
        .root {
            /*padding-left: 100px;*/
            display: flex;
            border: 2px solid #c0c0c0;
            height: 100%;
        }
        .sidebar {
            width: 100px;
            background-color: yellow;
        }
        .content {
            /*width: 100%;*/
            flex: 1;
            background-color: red;
        }
    </style>
</head>
<body>
    <div class="root">
        <div class="sidebar">
            
        </div>
        <div class="content">
            
        </div>
    </div>
</body>
</html>

案例二：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Flex2</title>
    <style type="text/css">
        .container {
            display: flex;
            width: 400px;
            height: 300px;
        }
        .item {
            flex: 1;
            /*每一项占一份*/
        }
        .item:nth-child(even) {
            background-color: yellow;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="item">1</div>
        <div class="item">2</div>
        <div class="item">3</div>
        <div class="item">4</div>
        <div class="item">5</div>
    </div>
</body>
</html>

案例三：音乐播放器主界面

// index.wxml
<view class="root">
  <!-- 标签栏的页签 固定高度 -->
  <view class="tabs">
    <view class="item active">
      <text>个性推荐</text>
    </view>
    <view class="item">
      <text>歌单</text>
    </view>
    <view class="item">
      <text>主播电台</text>
    </view>
    <view class="item">
      <text>排行榜</text>
    </view>
  </view>
  <!-- 内容区域 自适应高度 -->
  <scroll-view class="content" scroll-y>
    <swiper class="slide" autoplay indicator-dots>
      <swiper-item>
        <image src="../../images/slide.png"></image>
      </swiper-item>
      <swiper-item>
        <image src="../../images/slide.png"></image>
      </swiper-item>
      <swiper-item>
        <image src="../../images/slide.png"></image>
      </swiper-item>
    </swiper>
    <view class="portals">
      <view class="item">
        <image src="../../images/04.png"></image>
        <text>私人FM</text>
      </view>
      <view class="item">
        <image src="../../images/05.png"></image>
        <text>每日歌曲推荐</text>
      </view>
      <view class="item">
        <image src="../../images/06.png"></image>
        <text>云音乐新歌榜</text>
      </view>
    </view>
    <view class="list">
      <view class="title">
        <text>推荐歌单</text>
      </view>
      <view class="inner">
        <view class="item">
          <image src="../../images/poster.jpg"></image>
          <text>一生中最爱的是谁谁？</text>
        </view>
        <view class="item">
          <image src="../../images/poster.jpg"></image>
          <text>一生中最爱的是谁谁？</text>
        </view>
        <view class="item">
          <image src="../../images/poster.jpg"></image>
          <text>一生中最爱的是谁谁？</text>
        </view>
        <view class="item">
          <image src="../../images/poster.jpg"></image>
          <text>一生中最爱的是谁谁？</text>
        </view>
        <view class="item">
          <image src="../../images/poster.jpg"></image>
          <text>一生中最爱的是谁谁？</text>
        </view>
        <view class="item">
          <image src="../../images/poster.jpg"></image>
          <text>一生中最爱的是谁谁？</text>
        </view>
      </view>
    </view>
  </scroll-view>
  <!-- 播放控制条条 固定高度 -->
  <view class="player">
    <view class="poster">
      <image src="../../images/poster.jpg"></image>
    </view>
    <view class="info">
      <text class="title">一生中最爱</text>
      <text class="artist">谭咏麟</text>
    </view>
    <view class="controls">
      <image src="../../images/01.png"></image>
      <image src="../../images/02.png"></image>
      <image src="../../images/03.png"></image>
    </view>
  </view>
</view>

// index.wxss
page {
  height: 100%;
}

.root {
  display: flex;
  flex-direction: column;
  height: 100%;
  background-color: #f0f0f0;
}

.tabs {
  display: flex;
  background-color: pink;
}

.tabs .item {
  flex: 1;
  text-align: center;
  font-size: 12px;
  background-color: #222;
  color: #ccc;
  padding: 8px 0;
}

.tabs .item.active {
  color: #fff;
  border-bottom: 2px solid #e9232c;
}

.content {
  flex: 1;
  background-color: #111214;
  color: #ccc;
  overflow: hidden;
}

.slide image {
  width: 100%;
  height: 130px;
}

.portals {
  display: flex;
  margin-bottom: 15px;
}

.portals .item {
  flex: 1;
}

.portals .item image {
  width: 60px;
  height: 60px;
  display: block;
  margin: 10px auto;
}

.portals .item text {
  display: block;
  font-size: 12px;
  text-align: center;
}

.list .title {
  margin: 5px 10px;
  font-size: 14px;
}

.list .inner {
  display: flex;
  flex-wrap: wrap;
}


.list .inner .item {
  width: 33.33333333%;
}

.list .inner .item image {
  display: block;
  width: 120px;
  height: 120px;
  margin: 0 auto;
}

.list .inner .item text {
  font-size: 14px;
}

.player {
  display: flex;
  height: 50px;
  background-color: #17181A;
}

.poster image {
  width: 40px;
  height: 40px;
  margin: 5px;
}

.info {
  flex: 1;
  color: #888;
  font-size: 14px;
  margin: 5px;
}

.info .title{
  display: block;
  font-size: 16px;
  color: #ccc;
}

.controls image {
  width: 40px;
  height: 40px;
  margin: 5px 2px;
}

// index.json
{
  "navigationBarTitleText": "Music Player",
  "navigationBarBackgroundColor": "#333",
  "navigationBarTextStyle": "white"
}

3 各种属性

flex-direction调整主轴方向（默认为水平方向）

justify-content调整主轴对齐

align-items调整侧轴对齐（子元素可以使用align-self覆盖）

flex-wrap控制是否换行

align-content堆栈（由flex-wrap产生的独立行）对齐

flex-flow是flex-direction + flex-wrap的简写形式

flex是子项目在主轴的缩放比例，不指定flex属性，则不参与伸缩分配

order控制子项目的排列顺序，正序方式排序，从小到大