flex布局基础

理解flex的容器和元素
flex容器属性详解
flex元素属性详解
具体举例说明每个属性

理解flex的容器和元素

红色背景的是容器，黄色的item是元素。
使用flex布局的容器，它内部的元素自动成为flex项目。
容器拥有两根隐形的轴，水平的主轴，和竖直的交叉轴。

主轴开始的位置，即主轴与右边框的交点，称为main start；
主轴结束的位置称为main end；
交叉轴开始的位置称为cross start；
交叉轴结束的位置称为cross end。
item按主轴或交叉轴排列。
item在主轴方向上占据的宽度称为main size。
在交叉轴方向上占据的宽度称为cross size。

flex容器熟悉详解

flex-direction 决定元素的排列方向
flex-wrap 决定元素如何换行（排列不下时）
flex-flow flex-direction和flex-wrap的简写
justify-content 元素在主轴上的对齐方式
align-items 元素在交叉轴的对齐方式

flex元素属性详解

fkex元素的属性只能用在每个元素里面无法用在container里面。

flex-grow 当有多余空间时，元素的放大比例
flex-shrink 当空间不足时，元素的缩小比例
flex-basis 元素在主轴上占据的空间
flex 是 grow,shrink,basis的简写
order 定义元素的排列顺序
align-self 定义元素自身的对齐方式
（align-self这个属性可以复写justify-content 和align-items属性）

具体举例说明每个属性

首先先写出我们元素不加任何属性的样子

/* flex.wxss  */
.container{
  height: 1183rpx;
  width: 100%;
  background-color: pink;
}
.item{
    width: 100rpx;
    height: 100rpx;
    background-color: yellow;
    border: 2px solid white;
}

<!--flex.wxml-->
<view class="container">
    <view class="item">1</view>
    <view class="item">2</view>
    <view class="item">3</view>
    <view class="item">4</view>
</view>

在这里插入图片描述

flex容器属性详解

1. flex-direction
决定主轴的方向，即项目排列的方向，有四个可能的值：row(默认)|row-reverse|column|column-reverse

row:主轴为水平方向，项目沿主轴从左至右排列
column：主轴为竖直方向，项目沿主轴从上至下排列
row-reverse：主轴水平，项目从右至左排列，与row反向
column-reverse：主轴竖直，项目从下至上排列，与column反向


 display: flex;  /*默认就是横着的 */
 flex-direction:row /* 不写这句也是横的*/

在这里插入图片描述

 display: flex;
 flex-direction: column;

在这里插入图片描述
2. flex-wrap
默认情况下，不换行！在主轴上，flex-wrap决定当排列不下时是否换行以及换行的方式，可能的值：nowrap(默认)|wrap|wrap-reverse

nowrap：自动缩小项目，不换行
wrap：换行，第一行在上方
wrap-reverse：换行，第一行在下面

 display: flex;
 flex-direction: row;
 flex-wrap: nowrap;

在这里插入图片描述

display: flex;
flex-direction: row;
flex-wrap: wrap;

在这里插入图片描述
3. flex-flow

flex-flow:row wrap
/*和楼下两句话的意思是一样的
 flex-direction: row;
 flex-wrap: wrap;
*/

4. justify-content
内容对齐属性应用在弹性容器上，把弹性项沿着弹性容器的主轴线（main axis）对齐。
该操作发生在弹性长度以及自动边距被确定后。它用来在存在剩余空间时如何加以分配，也会在发生内容溢出时影响项目的对齐。
有六个可能的值： flex-start | flex-end | center | space-between | space-around

flex-start：从左边开始对齐，这个是默认值，溢出则下一行从左边开始对齐
flex-end：从右边开始对齐
center：居中对齐，溢出则下一行居中对齐
space-between：每个元素两边所占的空间相等
space-around：两端靠边对齐，中间间隔一样

5. align-item
在交叉轴上的对齐方式
有五个可能的值：flex-start |flex-end |center |strech |baseline
（之前在网上看到这张图，感觉讲的非常详细于是就不加以描述）
在这里插入图片描述
(注：这是一张网图，由于不知道出处所以没有写上作者的名字，希望有知道的同学，能帮忙标注出)