cssFlexbox布局用法-创新互联

CSS Flexbox布局模块

在Flexbox布局模块之前，有四种布局模式：
块（block），用于网页中的部分
内联（inline），用于文本
表（table），用于二维表数据
定位（position），用于元素的显式位置
Flexbox布局模块，可以更轻松地设计灵活的响应式布局结构，而无需使用浮动或定位。
注意兼容问题：
webkit内核浏览器应使用前缀-webkit
IE浏览器，可以很好的兼容IE11+版本，对于IE10只有部分可以兼容，且使用时需增加-ms，IE10浏览器中容器定义成弹性伸缩盒时，需使用display: -ms-flexbox

成都创新互联"三网合一"的企业建站思路。企业可建设拥有电脑版、微信版、手机版的企业网站。实现跨屏营销，产品发布一步更新，电脑网络+移动网络一网打尽，满足企业的营销需求！成都创新互联具备承接各种类型的成都网站设计、做网站项目的能力。经过10余年的努力的开拓，为不同行业的企事业单位提供了优质的服务，并获得了客户的一致好评。

Flexbox元素

要开始使用Flexbox模型，您需要先定义一个Flex容器。
1
2
3
上面的元素表示一个包含三个flex项目的flex容器(蓝色区域)。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Flexbox</title>
    <style>
        .flex-container {
            display: flex;
            background-color: DodgerBlue;
        }

        .flex-container > div {
            background-color: #f1f1f1;
            margin: 10px;
            padding: 20px;
            font-size: 30px;
        }
    </style>
</head>
<body>

<div class="flex-container">
    <div>1</div>
    <div>2</div>
    <div>3</div>
</div>

<p>flex布局必须有一个父元素，其display属性设置为flex。</p>

<p>flex容器的直接子元素自动成为flex项。</p>

</body>
</html>

父元素（容器）

通过将display属性设置为flex，Flex容器变得灵活：

.flex-container {
   display: flex;
 }

##Flex容器属性有：
flex-direction
flex-wrap
flex-flow
justify-content
align-items
align-content
flex-direction属性
##flex-direction属性定义容器要在哪个方向上堆叠弹性项目。
1
2
3
上面的元素表示一个包含三个flex项目的flex容器(蓝色区域)。 column值堆叠（但从顶部到底部）：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>flexbox</title>
    <style>
        .flex-container {
            display: flex;
            flex-direction: column;
            background-color: DodgerBlue;
        }

        .flex-container > div {
            background-color: #f1f1f1;
           width: 100px;
            margin: 10px;
            text-align: center;
            line-height: 75px;
            font-size: 30px;
        }
    </style>
</head>
<body>
<h2> flex-direction 属性</h2>

<p> "flex-direction: column;" 垂直堆叠flex项目(从上到下):</p>

<div class="flex-container">
    <div>1</div>
    <div>2</div>
    <div>3</div>
</div>

</body>
</html>

column-reverse值堆叠（但从底部到顶部）：

.flex-container {
   display: flex;
   flex-direction: column-reverse;
 }

row值水平堆放（左到右）：

.flex-container {
   display: flex;
   flex-direction: row;
 }

row-reverse值水平堆放（但从右到左）:

.flex-container {
   display: flex;
  flex-direction: row-reverse;
 }

flex-wrap属性

flex-wrap属性指定flex项是否应该换行。下面的示例有12个fiex项目，以更好地展示flex-wrap属性。

.flex-container {
   display: flex;
   flex-wrap: wrap;
 }

nowrap值指定Flex项目将不会换行（这是默认值）：

.flex-container {
   display: flex;
   flex-wrap: nowrap;
 }

wrap-reverse值将flex项目倒置：

.flex-container {
   display: flex;
   flex-wrap: wrap-reverse;
 }

flex-flow属性

flex-flow属性是用于设置flex-direction和flex-wrap属性的简写属性。

.flex-container {
   display: flex;
   flex-flow: row wrap;
 }

##justify-content属性
justify-content属性用于对齐flex项：
1
2
3
center值中心对齐：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>flex</title>
    <style>
        .flex-container {
            display: flex;
            justify-content: center;
            background-color: DodgerBlue;
        }

        .flex-container > div {
            background-color: #f1f1f1;
           width: 100px;
            margin: 10px;
            text-align: center;
            line-height: 75px;
            font-size: 30px;
        }
    </style>
</head>
<body>
<h2>  justify-content 属性</h2>

<p>  "justify-content: center;" 对齐容器中心的伸缩项目:</p>

<div class="flex-container">
    <div>1</div>
    <div>2</div>
    <div>3</div>
</div>

</body>
</html>

flex应用场景

使用Flex Box制作响应式网站和图库非常方便

CSS Flexbox属性

属性	描述
display	指定用于HTML元素的框的类型
flex-direction	指定flex容器中可伸缩项目的方向
justify-content	当项目不使用主轴上的所有可用空间时，水平对齐flex项目
align-items	当项目不使用横轴上的所有可用空间时，垂直对齐flex项目
flex-wrap	指定是否应该包装flex项(如果在一行上没有足够的空间容纳它们)
align-content	修改flex-wrap属性的行为。它类似于对齐项，但是它不是对齐flex项，而是对齐flex行
flex-flow	flex-direction和flex-wrap的简写属性
order	指定一个flex项相对于同一容器内其他flex项的顺序
align-self	用于flex项目。覆盖容器的align-items属性
flex	flex-growth、flex-shrink和flex-base属性的简写属性

另外有需要云服务器可以了解下创新互联scvps.cn，海内外云服务器15元起步，三天无理由+7*72小时售后在线，公司持有idc许可证，提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案，具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势，专为企业上云打造定制，能够满足用户丰富、多元化的应用场景需求。

网站题目：cssFlexbox布局用法-创新互联
分享网址：https://www.cdcxhl.com/article32/ihipc.html

成都网站建设公司_创新互联，为您提供建站公司、自适应网站、Google、网站导航、网站制作、外贸网站建设

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源：创新互联

猜你还喜欢下面的内容