CSS3增加合理⊙﹏⊙布局之: flex详细说明_建站快车_网站建设代理_自助建站代理_智能建站代理_建站加盟

建站快车_网站建设代理_自助建站代理_智能建站代理_建站加盟移动版

建站首页 > 新闻资讯 > 技术知识 >

CSS3增加合理⊙﹏⊙布局之: flex详细说明

flex 基本要素

flex合理布局(flex是flexible box的简称), 也称之为延展性盒实体模型 。将特性和特性值(display:flex; )写在哪儿个标识款式中,谁便是 器皿;它的全部子原素全自动变成器皿组员,称之为新项目。

当一个原素的display 赋值为flex,全部新项目(子原素)会在一行显示信息;假如全部新项目的规格之和超过器皿,都不会超过父原素的宽、高宽比。不容易换行(每一个新项目都是全自动变小相对的占比)。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>合理布局之:flex</title>
    <link rel="stylesheet" href="./CSS/normalize.css">
    <style>
        section {
            width: 500px;
            height: 800px;
            border: 2px solid black;
            margin: 50px auto;
            display: flex;
        }
        div {
            width: 100px;
            height: 100px;
            border: 1px solid tomato;
        }
    </style>
</head>
<body>
    <section>
        <div>01</div>
        <div>02</div>
        <div>03</div>
        <div>04</div>
        <div>05</div>
        <div>06</div>
    </section>
</body>
</html>

网页页面实际效果 : 每个器皿都等占比变小了

css编码分成二种: 一类是可用于器皿的 (设定主轴的起止部位、换行、主轴的两端对齐方法、多跟轴线两端对齐方法);一类是可用于新项目的(设定新项目的部位)。

器皿常见的特性和特性值

因为反复编码较多,也不一 一提交编码了,大伙儿能够自身动手能力,敲敲编码,试一下看。

一、设定主轴的起止方位  flex-direction:

默认设置为X轴(行):

<style>
        section {
            width: 500px;
            height: 500px;
            border: 2px solid black;
            margin: 50px auto;
            display: flex;
            /* flex-direction: row; */
            /* flex-direction: row-reverse; */
            /* flex-direction: column; */
            /* flex-direction: column-reverse; */
        }
        
        div {
            width: 100px;
            height: 100px;
            border: 1px solid tomato;
        }
    </style>

flex-direction:row; 默认设置是X轴的起止方位为刚开始部位 (从左往右先后放置);

flex-direction:row-reverse; 更改X轴的起止方位为完毕部位 (从右到左先后放置);

设定主轴的起止方位为Y轴(列):

flex-direction:column; 默认设置是Y轴的起止方位为刚开始部位(从上到下先后放置)

flex-direction:column-reverse; 更改Y轴的起止方位为完毕部位(从下到上先后放置)

二、设定新项目是不是换行  flex-wrap:(默认设置不是换行)

<style>
        section {
            width: 400px;
            height: 400px;
            border: 2px solid black;
            margin: 50px auto;
            display: flex;
            /* flex-wrap: wrap; */
            /* flex-wrap: wrap-reverse; */
        }
        
        div {
            width: 100px;
            height: 100px;
            border: 1px solid tomato;
        }
    </style>

flex-wrap: nowrap;  默认设置值不是换行;(n个新项目都是在一行显示信息.假如新项目规格之和超过器皿主轴的规格,则新项目会全自动变小相对比列.) (参照第一个编码 网页页面結果展现)

flex-wrap: wrap; 设定换行;(超过主轴的宽,则开展换行。换行后,二行中间会出現间隔,是由于竖直方位有剩下室内空间,会均值分派给第二行的左右)

flex-wrap: wrap-reverse; 倒序换行;(假如有二行,第二行显示信息在前边,第一行显示信息在后边)

三、主轴方位的两端对齐方法  justify-content:

新项目是一个时:

<style>
        section {
            width: 400px;
            height: 400px;
            border: 2px solid black;
            margin: 50px auto;
            display: flex;
            /* justify-content: flex-start; */
            /* justify-content: flex-end; */
            /* justify-content: center; */
        }
        
        div {
            width: 100px;
            height: 100px;
            border: 1px solid tomato;
        }
    </style>

justify-content:flex-start; 以主轴刚开始方位两端对齐 (默认设置)

justify-content:flex-end; 以主轴完毕方位两端对齐

justify-content:center; 主轴方位垂直居中

新项目是好几个时:

<style>
        section {
            width: 500px;
            height: 500px;
            border: 2px solid black;
            margin: 50px auto;
            display: flex;
            /* justify-content: space-between; */
            /* justify-content: space-around; */
            /* justify-content: space-evenly; */
        }
        
        div {
            width: 100px;
            height: 100px;
            border: 1px solid tomato;
        }
    </style>

justify-content: space-between; 两边两端对齐 (第一个新项目在器皿的起止部位,最终一个新项目在器皿的完毕部位,正中间间距相同)

justify-content: space-around;  分散化两端对齐

justify-content: space-evenly;  均分剩下室内空间,每一个新项目中间的间距同样

四、主轴更改为交叉式轴方位的两端对齐方法

一根轴线: 主轴需更改为Y轴:flex-direction: column;

align-items: baseline; 以新项目的第一写作字的基准线两端对齐

align-items: stretch; (新项目沒有给高的状况下,stretch便是默认设置值,假如新项目沒有设定高宽比,便是器皿的高)

<style>
        section {
            width: 500px;
            height: 500px;
            border: 2px solid black;
            margin: 50px auto;
            display: flex;
            /* 主轴需更改为Y轴 新项目按列放置 */
            flex-direction: column;
            /* align-items: flex-start;  默认设置放置方法 */
            /* align-items: center; */
            /* align-items: flex-end; */
        }
        
        div {
            width: 100px;
            height: 100px;
            border: 1px solid tomato;
        }
    </style>

align-items: flex-start;  交叉式轴从刚开始位 置两端对齐

align-items: center; 交叉式轴垂直居中两端对齐

 

align-items: flex-end; 交叉式轴从完毕部位两端对齐

多根轴线: (全部新项目的规格之和,务必超过器皿的规格,使新项目换行显示信息)

<style>
        section {
            width: 500px;
            height: 500px;
            border: 2px solid black;
            margin: 50px auto;
            display: flex;
            flex-direction: column;
            flex-wrap: wrap;
            /* align-content: center; */
            /* align-content: flex-end; */
            /* align-content: space-between; */
            /* align-content: space-around; */
        }
        
        div {
            width: 100px;
            height: 100px;
            border: 1px solid tomato;
        }
    </style>

align-content: flex-start; 交叉式轴从刚开始部位两端对齐

align-content: center; 交叉式轴垂直居中两端对齐

 

align-content: flex-end; 交叉式轴从完毕部位两端对齐

align-content: space-between; 交叉式轴两边两端对齐

 

align-content: space-around; 交叉式轴分散化两端对齐

align-content: space-evenly; 交叉式轴均值分派

新项目的特性和特性值:

 一、order 操纵新项目部位

order:1;

赋值 : 正、负数 (默认设置值是 0)

值越低越靠前 值越大越靠后 。

(可用情景: 1.检索模块提升,提高SEO 把关键的信息内容在html编码中靠前放置,但不危害合理布局 2.调节新项目部位)

<style>
        section {
            width: 500px;
            height: 500px;
            border: 2px solid black;
            margin: 50px auto;
            display: flex;
        }
        
        div {
            width: 100px;
            height: 100px;
            border: 1px solid tomato;
        }
        
        div:nth-child(4) {
            order: -1;
        }
    </style>

设定一个或好几个[新项目]在交叉式轴的两端对齐方法:

<style>
        section {
            width: 800px;
            height: 400px;
            border: 2px solid black;
            margin: 50px auto;
            display: flex;
        }
        
        div {
            width: 100px;
            height: 100px;
            border: 1px solid tomato;
        }
        
        div:nth-child(2) {
            align-self: center;
        }
        
        div:nth-child(3) {
            align-self: flex-end;
        }
    </style>

align-self: flex-start; 设定新项目在交叉式轴刚开始部位放置 (默认设置部位)

align-self: center; 设定新项目在交叉式轴垂直居中放置

align-self: flex-end; 设定新项目在交叉式轴完毕部位放置

设定某一个或好几个原素变大占比

标准:全部新项目的规格之和要低于器皿的规格
(沒有剩下室内空间,则设定此特性失效。)

一个原素有 flex-grow 特性

<style>
        section {
            width: 800px;
            height: 400px;
            border: 2px solid black;
            margin: 50px auto;
            display: flex;
        }
        
        div {
            width: 100px;
            height: 100px;
            border: 1px solid tomato;
        }
        
        div:nth-child(2) {
            flex-grow: 1;
        }
    </style>

好几个新项目有flex-grow 特性

<style>
        section {
            width: 800px;
            height: 200px;
            border: 2px solid black;
            margin: 50px auto;
            display: flex;
            box-sizing: border-box;
        }
        
        div {
            width: 100px;
            height: 100px;
            border: 1px solid tomato;
            box-sizing: border-box;
        }
        
        div:nth-child(2) {
            flex-grow: 1;
        }
        
        div:nth-child(4) {
            flex-grow: 2;
        }
    </style>

实际效果展现

将器皿的剩下室内空间分为相对的flex-grow的份数,再依照每一个新项目的份数,分到有flex-grow特性的新项目。

总而言之,flex应用起來非常便捷,可可用于自适应网站,也可让用圣杯合理布局。仅仅特性较多,还要多练、多实践活动 ,坚信你也可以迅速娴熟应用flex的。

强烈推荐一个游戏,很趣味,又能提高有关flex的应用方式 :Flexbox Froggy  http://blog.xiaoboswift.com/flexbox/#zh-cn   去协助小田鸡回家了吧~~

小结

到此这篇有关CSS3增加合理布局之: flex详细说明的文章内容就详细介绍到这了,大量有关css flex 合理布局內容请检索脚本制作之家之前的文章内容或再次访问下边的有关文章内容,期待大伙儿之后多多的适用脚本制作之家!

(责任编辑:admin)