flex布局

在使用flex布局时先用div创建一个盒子模型

eg:

​
<div class="demoOne">
        <div class="boxOne">1</div>
        <div class="boxTwo">2</div>
        <div class="boxThree">3</div>

​

这是一个大盒子包含了三个小盒子,且这是flex.html,需要创建一个flex.css副本来调整盒子的各种形态

 在flex.css中对demoOne盒子进行大小以及色态等进行调整

.demoOne{
   
    border:5px solid blue; 
    width: 600px;
    height: 600px;

这也只是设置最基本的宽高以及盒子线条颜色,如果我们想要设置弹性盒子布局则需要一个代码的帮助

display: flex;

设置完后我们就可以对盒子布局进行调整,当然,我们是调整大盒子内部包含的小盒子

    flex-direction:设置主轴方向 
    colnmn:主轴就是从上到下的垂直方向
    row: 主轴就是从左到右的水平方向,默认值
    column-reverse:主轴是从上到下的垂直方向
    row-reverse:主轴是从从左到右的垂直方向

这里我们解释一下什么是主轴方向,主轴方向也就是说x,y轴方向,就是盒子本来是从左到右,使用row-reverse后便从右到左了

 

垂直方向变换也和此类似 

 

 知道这些知道我们就要调整盒子的对齐方式了

    justify-content:设置主轴方向上的对齐方式 
    flex-start:默认值,项目从主轴起点开始对齐,不留间隙
    flex-end:从主轴终点对齐,不留间隙
    center:主轴居中对齐,不留间隙
    space-around:每个项目距离相等
    space-between:两端对齐 

这里需要注意的盒子之间是否会留有间隙的问题

这也只是 justify-content的对齐方式,我们还有一个项目在交叉轴上的对齐方式

    align-items:设置项目在交叉轴上的对齐方式
    center交叉轴居中对齐 
    flex-start:项目定点与交叉轴起点对齐
    flex-end:项目底部与交叉轴终点对齐
    baseline:项目的第一行文字基线对齐 

盒子设计成品

 这个按个人喜好设计,并不一定需要一模一样

flex-warp:设置项目是否换行

    flex-warp:设置项目是否换
    nowarp:不换行
    warp:换行
    warp-reverse:反方向换行

 最后我们还有一个结构伪选择器,就是可以一个同样类型的盒子中指定某个盒子的形态

结构伪类选择器 nth-child()
    .box:nth-child(5){
    background-color: aqua;

换行盒子成品

 

盒子全部编写代码