CSS伸缩布局

1. 伸缩布局应用:

伸缩布局应用

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

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

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

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

min-width 设置px 到达设置的这个值就不在缩放了

max-width 跟上面这个相反

flex 可以放在每个盒子里面自由调整

需要给盒子添加display: flex;

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style>

        section {

            width: 80%;

            height: 200px;

            border: 1px solid pink;

            margin: 100px auto;

            /*给父级盒子添加flex*/

            display: flex;  /*伸缩布局模式*/

        }

        section div {

            height: 100%;

            flex: 1;  /*每个子盒子占的份数*/

        }

        section div:nth-child(1) {

            background-color: pink;

        }

        section div:nth-child(2) {

            background-color: purple;

            margin: 0 5px;

        }

        section div:nth-child(3) {

            background-color: pink;

        }

    </style>

</head>

<body>

    <section>

        <div></div>

        <div></div>

        <div></div>

    </section>

</body>

</html>

2. 伸缩盒子设置固定宽度

section div:nth-child(1) {

            background-color: pink;

            width: 300px;

        }

        section div:nth-child(2) {

            background-color: purple;

            margin: 0 5px;

            flex: 1;

        }

        section div:nth-child(3) {

            background-color: pink;

            flex: 2;

        }

伸缩的时候2和3可以伸缩  1不会变

3.伸缩布局的排列方式

flex-direction: colomn; 列布局

flex-direction: colomn；行布局

section {

            width: 80%;

            height: 200px;

            border: 1px solid pink;

            margin: 100px auto;

            /*给父级盒子添加flex*/

            display: flex;  /*伸缩布局模式*/

            min-width: 500px;

            flex-direction: column;

        }

协程布局案列：

案例之协程

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style>

        * {

            margin: 0;

            padding: 0;

        }

        ul {

            list-style: none;

        }

        body {

            min-width: 320px;

            max-width: 540px;

            margin: 0 auto;

        }

        header {

            width: 100%;

            height: 100px;

        }

        header img {

            width: 100%;

            height: 100%;

        }

        nav {

            padding: 5px;

        }

        .row {

            height: 90px;

            width: 100%;

            background-color: #ff697a;

            border-radius: 8px;

            display: flex;

            margin-bottom: 5px;

        }

        nav .row:nth-child(2) {

            background-color: #3d98ff;

        }

        nav .row:nth-child(3) {

            background-color: #44c522;

        }

        nav .row:nth-child(4) {

            background-color: #fc9720;

        }

        .row3 {

            flex: 1;

            border-left: 1px solid #fff;

        }

        row div:first-child {

        }

        .hotel {

            display: flex;

            flex-direction: column;

        }

        .hotel a {

            flex: 1;

            font-size: 16px;

            color: #fff;

            text-align: center;

            line-height: 45px;

            text-decoration: none;

            text-shadow: 0 1px 2px rgba(0,0,0, .3)

        }

        .hotel a:first-child {

            border-bottom: 1px solid #fff;

        }

    </style>

</head>

<body>

    <header>

        <img src="data:image/ctrip.jpg" alt="">

    </header>

    <nav>

        <div class="row">

            <div class="row3"></div>

            <div class="row3 hotel">

                <a href="#">海外酒店</a>

                <a href="#">特价酒店</a>

            </div>

            <div class="row3 hotel">

                <a href="#">团购</a>

                <a href="#">客栈</a>

            </div>

        </div>

        <div class="row">

            <div class="row3"></div>

            <div class="row3 hotel">

                <a href="#">海外酒店</a>

                <a href="#">特价酒店</a>

            </div>

            <div class="row3 hotel">

                <a href="#">团购</a>

                <a href="#">客栈</a>

            </div>

        </div>

        <div class="row">

            <div class="row3"></div>

            <div class="row3 hotel">

                <a href="#">海外酒店</a>

                <a href="#">特价酒店</a>

            </div>

            <div class="row3 hotel">

                <a href="#">团购</a>

                <a href="#">客栈</a>

            </div>

        </div>

        <div class="row">

            <div class="row3 hotel">

                <a href="#">海外酒店</a>

                <a href="#">特价酒店</a>

            </div>

            <div class="row3 hotel">

                <a href="#">海外酒店</a>

                <a href="#">特价酒店</a>

            </div>

            <div class="row3 hotel">

                <a href="#">团购</a>

                <a href="#">客栈</a>

            </div>

        </div>

    </nav>

</body>

</html>

4.调整主轴对齐

justify-content 调整主轴对齐

值            描述

flex-start    让子元素从父元素的开头排序

flex-end      位于容器的结尾

center        位于容器的中心

space-between 左右贴近父盒子 中间分布空白距离

space-around  相当于给每个盒子添加了每个盒子的margin

5. 调整垂直对齐

align-items 调整垂直对齐

值         描述

stretch    让子元素的高度拉伸适应父容器（前提是子元素不给高度）

center     垂直居中

flex-start 垂直对齐开始位置

flex-end   垂直对齐结束位置

6. 控制是否换行

nowrap:  不换行 相当于强制一行显示 默认是这个

wrap     自动换行

wrap-reverse

7. 多行调整垂直对齐

align-content堆栈 针对flex里面多轴的情况下，align-items是针对一行的

必须对父亲设置display: flex;

flex-direction： row; 方式为横向排列 以及flex-wrap: wrap; 

strech

center

flex-start

flex-end

space-between

space-around    属性作用跟align-items的一样

order控制子盒子的前后顺序

数值越小越往前 可以写负数 默认是0

CSS伸缩布局的更多相关文章

CSS 伸缩布局
转载于:https://blog.csdn.net/weixin_41342585/article/details/80140513 1. flex-direction:设置伸缩容器中成员的排列方式 ...
CSS 小结笔记之伸缩布局 (flex)
CSS flex 是一种伸缩布局,之前块级元素布局在同一行,可以通过display或position或float来实现,而本篇介绍一个新的方法——flex(弹性布局). flex 为和模型布局提供了极 ...
css学习_css3伸缩布局 flex布局
1.flex布局案例一: 案例二: 保证不至于缩放得太小或太大案例三:flex的值不一定要写成几份,可以写成固定值案例四: 竖着3等分(父容器按照高度3等分) !!案例 -----用fle ...
CSS多列布局Multi-column、伸缩布局Flexbox、网格布局Grid详解
新css属性为我们提供了更加便捷的网页布局方式.来自微软的thomas lewis将带你认识去Grid Alignment,Flexibox Box以及Multi-column Layout这三大领域 ...
CSS3伸缩布局Flex学习笔记
如果需要使用伸缩布局首先得把display:flex;对于兼容还得加前缀display:-webkit-display:flex;等其他浏览器前缀,但我本机Chrome测试已经不需要加前缀了,其实这些 ...
第 29 章 CSS3 弹性伸缩布局[上]
学习要点: 1.布局简介 2.旧版本主讲教师:李炎恢本章主要探讨 HTML5 中 CSS3 提供的用来实现未来响应式弹性伸缩布局方案,这里做一个初步的了解. 一．布局简介 CSS3 提供一种崭新的 ...
CSS3弹性伸缩布局（二）——flex布局
上一篇博客<CSS3弹性伸缩布局(一)——box布局>介绍了旧版本的box布局,而这篇博客将主要介绍最新版本的flex布局的基础知识. 新版本简介新版本的Flexbox模型是2012年9 ...
flexbox 伸缩布局盒
Flexbox(伸缩布局盒) 是 CSS3 中一个新的布局模式,为了现代网络中更为复杂的网页需求而设计. Flexbox 由伸缩容器和伸缩项目组成.通过设置元素的 display 属性为 ...
CSS3弹性伸缩布局（上）——box布局
布局简介 CSS3提供了一种崭新的布局方式:Flexbox布局,即弹性伸缩布局模型(Flexible Box)用来提供一个更加有效的方式实现响应式布局. 由于这种布局还处于W3C的草案阶段,并且它分为 ...

随机推荐

安装mycat
1.下载mycat 为了方便,我已经下载下来.我选择的版本是1.6版本 2.解压,安装在/home/xm6f/dev目录下 cd /home/xm6f/devtar -zxvf Mycat-serve ...
MySQL创建触发器样例
# init DROP TABLE IF EXISTS students; DROP TABLE IF EXISTS class; # 创建测试用的班级表 CREATE TABLE class ( c ...
jQuery BlockUI Plugin Demo 2
Overview The jQuery BlockUI Plugin lets you simulate synchronous behavior when using AJAX, without l ...
【opencv】split
opencv-split Divides a multi-channel array into several single-channel arrays. code ,,,,,,,,,,,}; Ma ...
iOS-SDWebImage使用（转）
SDWebImage提供了如下三个category来进行缓存. MKAnnotationView(WebCache) UIButton(WebCache) UIImageView(WebCache) ...
vim 中与编码有关的选项
在 Vim 中,有四个与编码有关的选项,它们是:fileencodings.fileencoding.encoding 和 termencoding.在实际使用中,任何一个选项出现错误,都会导致出现乱 ...
eclipse 解决POM文件错误：org.apache.maven.archiver.MavenArchiver.getManifest(org.apache.maven.project.MavenProject, org.apache.maven.archiver.MavenArchiveConfiguration)
解决方案: 更新eclipse中的maven插件 1.1 Help -> Install New Software -> Add 1.2 Location中输入 http://repo1. ...
日后成为人工智能领域的小大佬，立个flag~
时间过的很快,仿佛就在昨天我还是一个机械在校硕士.但现在我已经开始在互联网企业中上班了,第一周的小任务进行简单的数据处理,自己搞的很不好,路还很长,但来日方长! 这周开始学习爬虫,最近会很忙,希望能改 ...
weblogic搭建总结
目录: 一.安装weblogic软件二.创建域三.启动管理节点四.创建被管理节点五.部署应用一.安装weblogic软件一.关闭selinux和防火墙 service iptables s ...
selenium + python 环境配置（二）之启动IE
安装好python.selenium工具后,下一步就是启动浏览器 1.启动IE浏览器即Selenium 调用IEDriverServer打开IE浏览器 ,因此需下载对应的IEDriverServer ...

CSS伸缩布局

CSS伸缩布局的更多相关文章

随机推荐

热门专题