flex布局

鉴于刚刚学习了关于flex布局的各种方法,我觉得有必要记录下来

flex是flexible Box的缩写，“弹性布局”，用来为盒状模型提供最大的灵活性，任何一个容器都可以指定为flex布局。提供一种更有效的方式来布局、对齐和分配容器中项目之间的空间，即使它们的大小未知或动态变化

进行flex布局时是少不了盒子模型的

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

此时便是一个盒子包含三个盒子,flex布局便是对里面的三个盒子进行调整,但需要一个代码来进行弹性盒子的调整

/*设置弹性盒子布局 */
    display: flex;

有了这个后便可以不会里面三个盒子的种种形态

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

这是各个盒子不同初始位置的设置,用改变主轴的方向来改变整个盒子的不同初始位置

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

这是盒子不同对齐方向的设置,值得注意的盒子间是否留有间隙 

 

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

这是盒子的另一个对齐方式

我们在设置第二类盒子来实现盒子换行操作 

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

 最后是结构伪类选择器

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

nth-child(),这可以指定同类型盒子中某个盒子的形态

第一个盒子成品

 

第二个盒子成品