CSS3之动画伸缩布局

伸缩布局(CSS3) 1. CSS3在布局方面做了非常大的改进，使得我们对块级元素的布局排列变得十分灵活，适应性非常强，其强大的伸缩性，在响应式开中可以发挥极大的作用。主轴：Flex容器的主轴...

伸缩布局(CSS3)

1. CSS3在布局方面做了非常大的改进，使得我们对块级元素的布局排列变得十分灵活，适应性非常强，其强大的伸缩性，在响应式开中可以发挥极大的作用。

主轴：Flex容器的主轴主要用来配置Flex项目，默认是水平方向

侧轴：与主轴垂直的轴称作侧轴，默认是垂直方向的

方向：默认主轴从左向右，侧轴默认从上到下

主轴和侧轴并不是固定不变的，通过flex-direction可以互换。

2、各属性详解

1.flex子项目在主轴的缩放比例，不指定flex属性，则不参与伸缩分配

min-width 最小值 min-width: 280px 最小宽度不能小于 280

max-width: 1280px 最大宽度不能大于 1280

2.flex-direction调整主轴方向（默认为水平方向）

flex-direction: column 垂直排列

flex-direction: row 水平排列

3、justify-content调整主轴对齐（水平对齐）

子盒子如何在父盒子里面水平对齐

4、align-items调整侧轴对齐（垂直对齐）

子盒子如何在父盒子里面垂直对齐（单行）

5、flex-wrap控制是否换行

当我们子盒子内容宽度多于父盒子的时候如何处理

6、flex-flow是flex-direction、flex-wrap的简写形式

flex-flow: flex-direction  flex-wrap;

白话记： flex-flow: 排列方向换不换行;

两个中间用空格

例如：

display: flex;
/* flex-direction: row;
flex-wrap: wrap;   这两句话等价于下面的这句话*/
flex-flow: column wrap;  /* 两者的综合 */

7、align-content堆栈（由flex-wrap产生的独立行）多行垂直对齐方式齐

align-content是针对flex容器里面多轴(多行)的情况,align-items是针对一行的情况进行排列。

必须对父元素设置自由盒属性display:flex;，并且设置排列方式为横向排列flex-direction:row;并且设置换行，flex-wrap:wrap;这样这个属性的设置才会起作用。

8、order控制子项目的排列顺序，正序方式排序，从小到大

用css 来控制盒子的前后顺序。用order 就可以

用整数值来定义排列顺序，数值小的排在前面。可以为负值。默认值是 0

伸缩布局以携程网的某个页面为案例

如果某些个元素需要用到伸缩布局,就必须在其父元素上加display: flex;再通过控制其他的属性即可得到自己想要的布局效果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .out{
            width: 100%;
            height: 510px;
            border: 1px solid grey;
            margin: 0 auto;
            max-width: 540px;
            min-width: 320px;
        }
        .innert img{
            width: 100%;
            height: 110px;
        }
        .innerb{
            width:100%;
            height: 390px;
            display: flex;
            flex-direction: column;
        }
        .innerb1{
            margin: 2px 5px;
            flex: 1;
            display: flex;
            border-radius: 4px;
            overflow: hidden;
        }
        .innerb11{
            background-color: #FF697A;
            line-height: 92px;
        }
        .innerb12{
            margin: 0 1px;
        }
        .innerb11,.innerb12,.innerb13{
            flex: 1;
            display: flex;
            flex-direction: column;
            color: #fff;
            text-align: center;
            font-size: 15px;
        }
        .innerb11t,.innerb11b{
            flex: 1;
            background-color: #FF697A;
            line-height: 45px;
        }
        .innerb11t{
            margin:0 0 1px 0;
        }
        .bg{
            background-color: #fff;
        }
    </style>
<body>
<div class="out">
    <div class="innert"><img src="banner.jpg" alt=""></div>
    <div class="innerb">
        <div class="innerb1">
            <div class="innerb11">酒店</div>
            <div class="innerb12">
                <div class="innerb11t">海外酒店</div>
                <div class="innerb11b">特价酒店</div>
            </div>
            <div class="innerb13">
                <div class="innerb11t">团购</div>
                <div class="innerb11b">同福客栈</div>
            </div>
        </div>
        <div class="innerb1">
            <div class="innerb11">酒店</div>
            <div class="innerb12">
                <div class="innerb11t">海外酒店</div>
                <div class="innerb11b">特价酒店</div>
            </div>
            <div class="innerb13">
                <div class="innerb11t">团购</div>
                <div class="innerb11b">同福客栈</div>
            </div>
        </div>
        <div class="innerb1">
            <div class="innerb11">酒店</div>
            <div class="innerb12">
                <div class="innerb11t">海外酒店</div>
                <div class="innerb11b">特价酒店</div>
            </div>
            <div class="innerb13">
                <div class="innerb11t">团购</div>
                <div class="innerb11b">同福客栈</div>
            </div>
        </div>
        <div class="innerb1">
            <div class="innerb11 bg">
                <div class="innerb11t">海外酒店</div>
                <div class="innerb11b">特价酒店</div>
            </div>
            <div class="innerb12">
                <div class="innerb11t">海外酒店</div>
                <div class="innerb11b">特价酒店</div>
            </div>
            <div class="innerb13">
                <div class="innerb11t">团购</div>
                <div class="innerb11b">同福客栈</div>
            </div>
        </div>
    </div>
</div>
</body>
</html>

order: 1;

此知识点重在理解，要明确找出主轴、侧轴、方向，各属性对应的属性值。

更多相关技术内容咨询欢迎前往并持续关注六星社区了解详情。

程序员编程交流QQ群：805358732

如果你想用Python开辟副业赚钱，但不熟悉爬虫与反爬虫技术，没有接单途径，也缺乏兼职经验
关注下方微信公众号：Python编程学习圈，获取价值999元全套Python入门到进阶的学习资料以及教程，还有Python技术交流群一起交流学习哦。

发表于 2021-06-28 11:00
阅读 ( 465 )
分类：WEB前端开发

CSS3之动画伸缩布局

伸缩布局(CSS3)

你可能感兴趣的文章

相关问题

0 条评论

作家榜 »