css display:flex 属性

display:flex 属性

display:flex 是一种布局方式。它即可以应用于容器中,也可以应用于行内元素。是W3C提出的一种新的方案,可以简便、完整、响应式地实现各种页面布局。目前,它已经得到了所有浏览器的支持。

Flex是Flexible Box的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性。设为Flex布局以后,子元素的float、clear和vertical-align属性将失效。

运用display:flex容易出的错

css display:flex 属性_第1张图片

这是一个错误的写法,把display:flex放入*{},会使得head里面的内容写显示在浏览器中,会出现下面图片的错误
css display:flex 属性_第2张图片
正确的写法如下:

  <style>
            *{
     
                margin: 0;
                padding: 0;

            }
            html,body{
     
                height: 100vh;
                width: 100%;
                align-items: center;
                display: -webkit-flex;
                justify-content: center;
            }
        #warp{
     
            width: 400px;
            height: 400px;
            background: #FF9933;
        }
    </style>
</head>
<body>
<div id="warp">
</div>

你可能感兴趣的:(html+css,html,css)