首页 > 其他 > 详细

flex弹性布局(一)

时间:2018-09-18 18:00:50      阅读:133      评论:0      收藏:0      [点我收藏+]

  最近有点小偷懒,已经好久没有写博客啦!为了消除我的惰性,今天就算天塌下来我也要。。。。。写博客!!!

  由于最近刚把flex从头到尾复习一遍,所以今天就来谈一谈flex弹性布局好了。相信道友们在面试的时候,肯定已经被垂直水平居中这个千古大题所折磨,虽然纯css可以解决垂直水平居中的问题,但是和flex一比较就显得有点复杂了,所以在写样式时,我们要多用flex弹性布局。

  flex布局可以简便、完整、响应式地实现各种页面布局,任何一个容器都可以指定为flex布局,但是要注意的是:设为flex布局以后,子元素的float、clear 和 vertical-align属性会失效。

(一) 容器(父元素)的属性

  flex-direction、flex-wrap、flex-flow、justify-content、align-items、align-content这六个属性设置在容器(父元素)上。

  下面我就分别来分析这六个属性是怎么用的,这六个属性中常用的当然是水平垂直居中了,所以就先分析水平居中和垂直居中怎么实现。

  1、justify-content属性    设置主轴对齐方式 

    它有5个值:

      flex-start(默认值):左对齐

      flex-end:右对齐

      center:居中

      space-between:两端对齐,项目之间的间隔都相等

      space-around:每个项目每侧的间隔相等,所以,项目之间的间隔比项目与边框的间隔大一倍

    实践出真知,下面就上代码和运行结果来看一下效果吧~~~

 (1)center  水平居中

  代码:

//html代码
<
div class="parent"> <div class="children"></div> </div>
//css代
.parent
{ width: 500px; height: 500px; border: 1px solid red; display: flex; justify-content: center; /*水平居中*/ } .children { width: 200px; height: 200px; border: 1px solid blue; }

运行效果:

                 技术分享图片

 

从运行效果图片上可以看到已经水平居中啦!

(2)flex-start 左对齐

  由于代码差不多,下面就不重复上代码了,但是运行效果还是要滴~~~

            技术分享图片

 (3)flex-end   右对齐

            技术分享图片

(4)space-between  两端对齐

代码:

<div class="parent">
    <div class="children"></div>
    <div class="children"></div>
    <div class="children"></div>
</div>
.parent{
    width: 500px;
    height: 200px;
    background: red;
    display: flex;
    justify-content: space-between;
}
.children{
    width: 100px;
    height: 100px;
    background: blue;
}

 

            技术分享图片

(5)space-around  每侧的间隔相等

 代码同上,将space-between改成space-around即可

下面是运行效果:

技术分享图片

 

 至此,flex弹性布局的主轴对齐方式就讲完了!由于时间有限,flex的其他属性就下次再更新喽~

flex弹性布局(一)

原文:https://www.cnblogs.com/nana402/p/9670263.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!