[聚合文章] CSS Flexbox详解

Flexbox是一个强大而灵活的布局，本篇文章主要对其进行学习了解。

一、Flexbox简介

Flexbox布局（Flexible Box)模块旨在提供一个更加有效的方式制定、调整和分布一个容器里的项目布局，即使他们的大小是未知或者是动态的。简单的理解，就是可以自动调整，计算元素在容器空间中的大小，并进行有效合理的布局。

Flexbox布局中有两个重要的概念：Flex容器和Flex项目。

Flex容器包含多个Flex项目，通过对Flex容器和Flex项目的具体属性进行设置，可以达到各种各样灵活的布局样式。

Flexbox使用

Flexbox的使用非常简单，只需要对Flex容器设置display:flex或者display:inline-flex，就可以具体操作使用Flexbox布局了。

下面以具体示例演示：

html代码

<div class="container">        <div class="wrap">            <div></div>            <div></div>            <div></div>        </div>    </div>

css代码

.container {    width: 70%;    height: 500px;    margin:20px auto;    border: 1px solid black;}.container .wrap {    display: flex;    border: 3px solid #a448cf;    margin:20px;    width:80%;    height:80%  }.container .wrap div {    width:150px;    height:150px;    background-color: #c75a5a;    margin:10px;
                
注：本文内容来自互联网，旨在为开发者提供分享、交流的平台。如有涉及文章版权等事宜，请你联系站长进行处理。