flex_从入门到放弃

最新推荐文章于 2022-04-14 10:32:05 发布

Nick_YangXiaoTong

最新推荐文章于 2022-04-14 10:32:05 发布

阅读量277

点赞数

分类专栏： CSS 文章标签： Css3

本文链接：https://blog.csdn.net/nick_yangxiaotong/article/details/81666928

版权

CSS 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

`基本概念`

`main axis`

水平的主轴

`cross axis`

垂直的交叉轴

`main start`

主轴的开始位置

`main end`

主轴的结束位置

`cross start`

交叉轴的开始位置

`cross end`

交叉轴的结束位置

`main size`

单个项目占据的主轴空间

`cross size`

单个项目占据的交叉轴空间

`flex布局属性`

`flex-direction`

主轴方向（项目的排列方向）

[]行左=>右（默认值）
[] row-reverse right =>左
[] column上=>下
[] column-reverse下=>上

`flex-wrap`

换行（排列不下，如何换行）

[] nowrap不换行（默认值）
[]换换行=>第一行在上方
[] wrap-reverse dumpquen =>第一行在下方

`flex-flow`

flex-direction状语从句：属性flex-wrap属性的简写形式，默认值为row nowrap。

`justify-content`

在项目主轴上的对齐方式

[] flex-start 左对齐（默认值）
[] flex-end 右对齐
[] 中居居
[] space-between 两端对其，间隔相等
[] space-around 平均分布，两侧间隔相等

`align-item`

在项目交叉轴上的对齐方式

[] flex-start 顶对齐
[] flex-end 底对齐
[] center 居中对齐
[] baseline 基于第一行的文字基线对齐
[] stretch 如果项目没有设置高度，将占满整个屏幕对齐（默认值）

`align-content`

基于交叉轴的多行对齐（只有一行不会起作用）

[] flex-start
[] flex-end
[ ] center
[ ] space-between
[ ] space-around
[ ] stretch

`flex元素属性`

`order`

定义项目的排列顺序。数值越小，排列越靠前，默认为0。

`flex-grow`

定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。（设置了非零的项会按比例均分剩余空间）

`flex-shrink`

定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。如果一个项目的flex-shrink属性为0，其他项目都为1，则空间不足时，前者不缩小。

`flex-basis`

以设为跟width或height属性一样的值（比如350px），则项目将占据固定空间。

`flex`

flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。

该属性有两个快捷值：auto (1 1 auto) 和 none (0 0 auto)。

`align-self`

允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。

`flex实战`

`移动端优先、响应式网站`

HTML

<!-- 
/**
 *                    _ooOoo_
 *                   o8888888o
 *                   88" . "88
 *                   (| -_- |)
 *                    O\ = /O
 *                ____/`---'\____
 *              .   ' \\| |// `.
 *               / \\||| : |||// \
 *             / _||||| -:- |||||- \
 *               | | \\\ - /// | |
 *             | \_| ''\---/'' | |
 *              \ .-\__ `-` ___/-. /
 *           ___`. .' /--.--\ `. . __
 *        ."" '< `.___\_<|>_/___.' >'"".
 *       | | : `- \`.;`\ _ /`;.`/ - ` : | |
 *         \ \ `-. \_ __\ /__ _/ .-` / /
 * ======`-.____`-.___\_____/___.-`____.-'======
 *                    `=---='
 *
 * .............................................
 *          佛祖保佑             永无BUG
 */
-->
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>
        Flex Learning
    </title>
    <link rel="stylesheet" href="./css/index.css">
</head>
<body>
    <!-- 盒子 -->
    <div class="box">
        <!-- header -->
        <header id="header" class="">
            This is header of top!
        </header><!-- /header -->

        <article>
            <p>
                坐个沙发, ie10的普及率还有待观望啊..坐个沙发, ie10的普及率还有待观望啊..坐个沙发, ie10的普及率还有待观望啊..坐个沙发, ie10的普及率还有待观望啊..坐个沙发, ie10的普及率还有待观望啊..坐个沙发, ie10的普及率还有待观望啊..坐个沙发, ie10的普及率还有待观望啊..坐个沙发, ie10的普及率还有待观望啊..坐个沙发, ie10的普及率还有待观望啊..坐个沙发, ie10的普及率还有待观望啊..坐个沙发, ie10的普及率还有待观望啊..坐个沙发, ie10的普及率还有待观望啊..
            </p>
        </article>
        <!-- 导航 -->
        <nav>
            导航
        </nav>
        <!-- 侧边栏 -->
        <aside>
            侧边栏
        </aside>

        <!-- footer -->
        <footer>
            This is footer of bottom!
        </footer>
    </div>


    <script src="./js/index.js" type="text/javascript" charset="utf-8" async defer></script>
</body>
</html>

CSS

html, body {
    margin: 0;
    padding: 0;
}

header, nav, article, aside, footer {
    box-sizing: border-box;
}

header {
    border: 1px solid red;
}

nav {
    border: 1px solid orange;
}

article {
    border: 1px solid #e5e5e5;
}

aside {
    border: 1px solid #000;
}

footer {
    border: 1px solid blue;
}

/* 启动flex模式，主轴按行排列 换行 */
.box {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}

.box > * {
    padding: 10px;
    flex: 1 100%;
}

/* 媒体查询 将nav与aside放在同一行 and后必须有空格 */
@media all and (min-width: 600px) {
    .box nav { flex: 1 auto; }
    .box aside { flex: 1 auto; }
}

/* 媒体查询 将nav与aside放在article两侧 */
@media all and (min-width: 1000px) {
    .box nav { order: 1; }
    .box article { order: 2; flex: 3 0%; }
    .box aside { order: 3; }
    .box footer { order: 4; }
}

Nick_YangXiaoTong

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
flex_从入门到放弃

基本概念main axis 水平的主轴cross axis 垂直的交叉轴main start 主轴的开始位置main end 主轴的结束位置cross start 交叉轴的开始位置cross end 交叉轴的结束位置main size 单个项目占据的主轴空间cros...
复制链接

扫一扫