Flex布局

CSS3中的Flex布局入门

详细讲解CSS3中的Flex布局的兼容、基础使用

2018-05-23侠课岛    基础入门       

前端/前端必修/使用CSS3的Flex弹性布局 20     0     3175

本套教程我们将详细讲解CSS3中的Flex布局

什么是Flex布局

在前端页面布局中,我们经常使用的布局方式是display+position+float的方式,自然也有很多人会使用过或者至少听过Flex布局,它相对于传统的布局来说,灵活性大大增强,对于响应式也很友好,它可以控制元素的排列方向,排列顺序以及对其顺序,在处理像垂直居中这种样式上,传统盒模型往往要在宽高都固定的情况下才比较好处理,而Flex布局则可以轻松实现未知大小的容器上的垂直居中。

Flex的兼容情况

Flex目前的兼容情况还是比较理想的,支持ie10+以上的ie浏览器(ie10加前缀-ms-可以支持),主流现代浏览器全部支持,不管是在移动端还是PC端都可以放心使用。大家也可以在网站canIuse上面查看它的具体兼容情况。点我查看

1.png

基本概念的介绍

当容器被设置成Flex布局时,它下面的子元素会自动成为flex-item,并且拥有一些自己独特的属性。容器默认存在两根轴,横向的主轴叫main axis,垂直的交叉轴叫corss axis,默认情况下,容器下面的子元素会沿着横向的主轴排列。

主轴的开始位置和结束位置分别叫main startmain end,交叉轴的开始和结束位置分别叫cross startcross end。单个项目占据的主轴空间(类似宽度)叫做main size,占据的交叉轴空间(类似高度)叫做cross size

2.png

Flex布局的基础使用

为了方便演示,首先我们创建一个html文件,设置一下基础样式,并在浏览器中打开页面。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Flex布局详解</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .container{
           background-color: #D8E2DC;
            padding: 20px;
        }
        .item{
            background-color: #FE938C;
            width: 100px;
            height: 100px;
            line-height: 100px;
            margin: 10px;
            color: #fff;
            text-align: center;
        }
    </style>
</head>
<body>
    <div>
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
    </div>
</body>
</html>


3.png

本教程图文或视频等内容版权归侠课岛所有,任何机构、媒体、网站或个人未经本网协议授权不得转载、转贴或以其他方式复制发布或发表。

评价

20

本课评分:
  •     非常好
难易程度:
  •     适中的
|
教程
粉丝
主页

签到有礼

已签到2天,连续签到7天即可领取7天全站VIP

  • 1
    +2 金币
  • 2
    +3 金币
  • 3
    +5 金币
  • 6
    +7 金币
  • 5
    +6 金币
  • 4
    暖心福利
    自选分类VIP ×1天
  • 7
    惊喜大礼

    自选分类VIP ×3天 +20金币
  • 持续签到 +8 金币

金币可以用来做什么?