前端第四章

分类：菜鸟笔记作者：qianmingmaoyao

01-弹性盒子初体验====================

 <style>
        .main {
            display: flex;
            width: 600px;
            /* height: 300px; */
            background-color: #ccc;
        }
        /* .main div {
            width: 200px;
            height: 100px;
            border: 1px solid red;
        } */
        /* 子元素：一行内显示，如果宽度多，子元素不变，如果宽度不够子元素自动进行缩小 */
        /* 对于弹性盒子，子元素div和span都是同等属性 */
        
        .main span {
            width: 200px;
            height: 100px;
            border: 1px solid yellow;
        }
    </style>
</head>

<body>
    <div class="main">
        <!-- <div class="con1">con1</div>
        <div class="con2">con2</div>
        <div class="con3">con3</div>
        <div class="con4">con4</div>
        <div class="con5">con5</div> -->
        <span>span1</span>
        <span>span2</span>
        <span>span3</span>
        <span>span4</span>
        <span>span5</span>
    </div>
</body>

02-父元素-flex-direction=======================

    <style>
        .main {
            display: flex;
            width: 600px;
            height: 300px;
            background-color: #ccc;
            /* 主轴的方向 flex-direction*/
            /* 默认 */
            /* 主轴为水平方向，起点在左端。 */
            flex-direction: row;
            /* 主轴为水平方向，起点在右端。 */
            /* flex-direction: row-reverse; */
            /* column：主轴为垂直方向，起点在上沿。 */
            /* flex-direction: column; */
            /* column-reverse：主轴为垂直方向，起点在下沿。 */
            /* flex-direction: column-reverse; */
        }
        
        .main div {
            width: 100px;
            height: 100px;
            border: 1px solid red;
        }
    </style>
</head>

<body>
    <div class="main">
        <div class="con1">con1</div>
        <div class="con2">con2</div>
        <div class="con3">con3</div>
        <div class="con4">con4</div>
        <div class="con5">con5</div>
    </div>
</body>

03-父元素-flex-wrap=====================

 <style>
        .main {
            /* 设置为弹性盒子 */
            display: flex;
            width: 600px;
            height: 600px;
            background-color: #ccc;
            /* 换行方式 */
            /* （默认） */
            /* flex-wrap: nowrap; */
            /* wrap：换行，第一行在上方。 */
            flex-wrap: wrap;
            /* wrap-reverse：换行，第一行在下方。 */
            flex-wrap: wrap-reverse;
        }
        
        .main div {
            width: 200px;
            height: 100px;
            border: 1px solid red;
        }
    </style>
</head>

<body>
    <div class="main">
        <div class="con1">con1</div>
        <div class="con2">con2</div>
        <div class="con3">con3</div>
        <div class="con4">con4</div>
        <div class="con5">con5</div>
    </div>
</body>

04-父元素-flex-flow======================

  <style>
        .main {
            /* 设置为弹性盒子 */
            display: flex;
            width: 600px;
            height: 300px;
            background-color: #ccc;
            /* flex-flow属性是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap。 */
            flex-flow: column wrap;
        }
        
        .main div {
            width: 200px;
            height: 100px;
            border: 1px solid red;
        }
    </style>
</head>

<body>
    <div class="main">
        <div class="con1">con1</div>
        <div class="con2">con2</div>
        <div class="con3">con3</div>
        <div class="con4">con4</div>
        <div class="con5">con5</div>
    </div>
</body>

05-主轴上的对齐方式============================

 <style>
        .main {
            /* 设置为弹性盒子 */
            display: flex;
            width: 1200px;
            height: 200px;
            margin: 0 auto;
            background-color: #ccc;
            /* 主轴上的对齐方式 */
            /* flex-start（默认值）：左对齐 */
            /* flex-end：右对齐 */
            /* justify-content: flex-end; */
            /* center：居中 */
            /* justify-content: center; */
            /* space-between：两端对齐，项目之间的间隔都相等。 */
            /* justify-content: space-between; */
            /* space-around：每个项目两侧的间隔相等。 */
            justify-content: space-around;
        }
        
        .main div {
            width: 250px;
            height: 200px;
            border: 1px solid red;
        }
    </style>
</head>

<body>
    <div class="main">
        <div class="con1">con1</div>
        <div class="con2">con2</div>
        <div class="con3">con3</div>
        <div class="con4">con4</div>
    </div>
</body>

06-副轴上的对齐方式==================

 <style>
        .main {
            /* 设置为弹性盒子 */
            display: flex;
            width: 1200px;
            height: 600px;
            margin: 0 auto;
            background-color: #ccc;
            /* 默认 */
            align-items: stretch;
            /* flex-start：交叉轴的起点对齐。 */
            align-items: flex-start;
            /* flex-end：交叉轴的终点对齐。 */
            align-items: flex-end;
            /* center：居中 */
            align-items: center;
            /* 基线对齐 */
            align-items: baseline;
        }
        
        .main div {
            width: 250px;
            height: 100px;
            border: 1px solid red;
        }
        
        .con1 {
            font-size: 24px;
        }
        
        .con3 {
            font-size: 36px;
        }
    </style>
</head>

<body>
    <div class="main">
        <div class="con1">con1x</div>
        <div class="con2">con2x</div>
        <div class="con3">con3x</div>
        <div class="con4">con4x</div>
    </div>
</body>

07-多根轴线的对齐方式================

<style>
        .main {
            /* 设置为弹性盒子 */
            display: flex;
            width: 1200px;
            height: 600px;
            margin: 0 auto;
            background-color: #ccc;
            flex-wrap: wrap;
            /* 多根轴线的对齐方式 */
            /* align-content: stretch; */
            /* 起点在上方 */
            align-content: start;
            /* 起点在下方 */
            align-content: end;
            /* 居中 */
            align-content: center;
            /* 两端对齐 */
            align-content: space-between;
            /* 每个项目两侧的间隔相等。 */
            align-content: space-around
        }
        
        .main div {
            width: 300px;
            height: 100px;
            border: 1px solid red;
        }
    </style>
</head>

<body>
    <div class="main">
        <div class="con1">con1</div>
        <div class="con2">con2</div>
        <div class="con3">con3</div>
        <div class="con4">con4</div>
        <div class="con5">con5</div>
        <div class="con6">con6</div>
        <div class="con7">con7</div>
        <div class="con8">con8</div>
    </div>
</body>

08-水平垂直居中=============================

<style>
        .father {
            width: 600px;
            height: 300px;
            border: 1px solid red;
            display: flex;
            /* 主轴center */
            justify-content: center;
            align-items: center;
        }
        
        .son {
            width: 200px;
            height: 100px;
            background-color: skyblue;
        }
    </style>
</head>

<body>
    <div class="father">
        <div class="son"></div>
    </div>
</body>

09-多个盒子水平水平垂直居中==============

 <style>
        .father {
            width: 800px;
            height: 300px;
            border: 1px solid red;
            display: flex;
            /* 主轴center */
            justify-content: center;
            align-items: center;
        }
        
        .son {
            width: 200px;
            height: 100px;
            border: 1px solid #666;
        }
    </style>
</head>

<body>
    <div class="father">
        <div class="son"></div>
        <div class="son"></div>
        <div class="son"></div>
    </div>
</body>

10-弹性盒子常用的布局方式===================

<style>
        .father {
            width: 1000px;
            height: 300px;
            border: 1px solid red;
            display: flex;
            /* 主轴center */
            justify-content: space-between;
            align-items: center;
        }
        
        .son {
            width: 200px;
            height: 250px;
            border: 1px solid #666;
        }
    </style>
</head>

<body>
    <div class="father">
        <div class="son">son</div>
        <div class="son">son</div>
        <div class="son">son</div>
        <div class="son">son</div>
    </div>
</body>

11-多根轴线的对齐方式=====================

 <style>
        .father {
            width: 900px;
            height: 600px;
            border: 1px solid red;
            display: flex;
            /* 主轴center */
            justify-content: space-between;
            /* 副轴居中 */
            align-items: center;
            flex-wrap: wrap;
            padding: 0px 10px;
        }
        
        .son {
            width: 200px;
            height: 250px;
            border: 1px solid #666;
        }
    </style>
</head>

<body>
    <div class="father">
        <div class="son">son</div>
        <div class="son">son</div>
        <div class="son">son</div>
        <div class="son">son</div>
        <div class="son">son</div>
        <div class="son">son</div>
        <div class="son">son</div>
        <div class="son">son</div>
    </div>
</body>

12-子元素-order=======================

<style>
        .main {
            /* 设置为弹性盒子 */
            display: flex;
            width: 600px;
            height: 300px;
            background-color: #ccc;
        }
        
        .main div {
            width: 200px;
            height: 100px;
            border: 1px solid red;
        }
        /* 由小到大的顺序进行排列-默认order：0 
            支持负数
        */
        
        .con1 {
            order: 2;
        }
        
        .con3 {
            /* 默认的order：0 */
            order: 1;
        }
        
        .con2 {
            order: -1;
        }
        
        .con4 {
            order: 3;
        }
    </style>
</head>

<body>
    <div class="main">
        <div class="con1">con1</div>
        <div class="con2">con2</div>
        <div class="con3">con3</div>
        <div class="con4">con4</div>
        <div class="con5">con5</div>
    </div>
</body>

13-子元素-flex-grow=====================

<style>
        .main {
            /* 设置为弹性盒子 */
            display: flex;
            width: 800px;
            height: 300px;
            background-color: #ccc;
        }
        
        .main div {
            width: 200px;
            height: 100px;
            border: 1px solid red;
        }
        /* 默认值 */
        /* flex-grow: 0; */
        
        .con1 {
            flex-grow: 1;
        }
        
        .con2 {
            flex-grow: 2;
        }
    </style>
</head>

<body>
    <div class="main">
        <div class="con1">con1</div>
        <div class="con2">con2</div>
        <div class="con3">con3</div>
    </div>
</body>

14-子元素-flex-shrink====================

 <style>
        .main {
            /* 设置为弹性盒子 */
            display: flex;
            width: 500px;
            height: 300px;
            background-color: #ccc;
        }
        
        .main div {
            width: 200px;
            height: 100px;
            border: 1px solid red;
        }
        /* 默认值 */
        /* flex-shrink: 1; */
        /* 值越大，缩小的倍数越大 */
        
        .con1 {
            flex-shrink: 2;
        }
        
        .con2 {
            flex-shrink: 3;
        }
    </style>
</head>

<body>
    <div class="main">
        <div class="con1">con1</div>
        <div class="con2">con2</div>
        <div class="con3">con3</div>
    </div>
</body>

15-子元素-flex-basis============================

 <style>
        .main {
            /* 设置为弹性盒子 */
            display: flex;
            width: 1000px;
            height: 300px;
            background-color: #ccc;
        }
        
        .main div {
            width: 100px;
            height: 100px;
            border: 1px solid red;
            flex-grow: 1;
        }
        
        .main .con1 {
            flex-basis: 0px;
        }
    </style>
</head>

<body>
    <div class="main">
        <div class="con1">con1</div>
        <div class="con2">con2</div>
        <div class="con3">con3</div>
    </div>
</body>

16-子元素-flex@==========================

<style>
        .main {
            /* 设置为弹性盒子 */
            display: flex;
            width: 1000px;
            height: 300px;
            background-color: #ccc;
        }
        
        .main div {
            width: 400px;
            height: 100px;
            border: 1px solid red;
        }
        
        .main .con1 {
            /* flex-grow flex-shrink flex-basis; */
            /* 1 1 auto */
            /* flex: auto; */
            /* 0 0 auto */
            /* flex: none; */
            /* 0 1 0% */
            /* flex: 0; */
            /* （flex-grow 1， flex-shrink 1,flex-basis 0%） */
            flex: 1;
        }
    </style>
</head>

<body>
    <div class="main">
        <div class="con1">con1</div>
        <div class="con2">con2</div>
        <div class="con3">con3</div>
    </div>
</body>

17-子元素-flex1的应用

 <style>
        .main {
            /* 设置为弹性盒子 */
            display: flex;
            height: 300px;
            background-color: #ccc;
        }
        
        .main div {
            height: 100px;
            border: 1px solid red;
            margin: 0 10px;
            /* flex-grow flex-shrink flex-basis */
            flex: 1;
        }
    </style>
</head>

<body>
    <div class="main">
        <div class="con1">con1</div>
        <!-- <div class="con2">con2</div>
        <div class="con3">con3</div> -->
    </div>
</body>

18-副轴子元素-不一样的对齐方式=============

 <style>
        .main {
            /* 设置为弹性盒子 */
            display: flex;
            width: 1200px;
            height: 600px;
            margin: 0 auto;
            background-color: #ccc;
            /* center：居中 */
            align-items: center;
        }
        
        .main div {
            width: 250px;
            height: 100px;
            border: 1px solid red;
        }
        /* align-self: auto | flex-start | flex-end | center | baseline | stretch; */
        
        .con1 {
            align-self: flex-start;
        }
    </style>
</head>

<body>
    <div class="main">
        <div class="con1">con1x</div>
        <div class="con2">con2x</div>
        <div class="con3">con3x</div>
        <div class="con4">con4x</div>
    </div>
</body>

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。

html前端前端

相关推荐

如何学习编程？新手菜鸟如何学编程？
学习编程是顺着互联网的发展潮流，是一件好事。新手如何学习编程？其实不难，不过在学习编程之前你得先了解你的目的是什么？这个很重要，因为目的决定你的发展方向、决定你的发展速度。
it行业都是什么工作？it行业主要做什么？
IT行业是什么工作做什么？IT行业的工作有：产品策划类、页面设计类、前端与移动、开发与测试、营销推广类、数据运营类、运营维护类、游戏相关类等，根据不同的分类下面有细分了不同的岗位。
女生学Java好就业吗？女生适合学Java编程吗？
女生学Java好就业吗？女生适合学Java编程吗？目前有不少女生学习Java开发，但要结合自身的情况，先了解自己适不适合去学习Java，不要盲目的选择不适合自己的Java培训班进行学习。只要肯下功夫钻研，多看、多想、多练
mysql-connect-confused
Can’t connect to local MySQL server through socket \'/var/lib/mysql/mysql.sock问题 1.进入mysql路径
oracle基本命令
oracle基本命令 一、登录操作 1.管理员登录 # 管理员登录 sqlplus / as sysdba 2.普通用户登录
shell判断服务是否启动
一、背景 因为项目中需要通北京网络，所以需要连vpn，但是服务器有时候会断掉，所以写个shell脚本每五分钟去判断是否连接，于是就有下面的shell脚本。
SQL BETWEEN 操作符
BETWEEN 操作符选取介于两个值之间的数据范围内的值。这些值可以是数值、文本或者日期。
​​windows上传ipa到开发者中心app store的方法
假如你已经使用过苹果开发者中心上架app，你肯定知道在苹果开发者中心的web界面，无法直接提交ipa文件，而是需要使用第三方工具，将ipa文件上传到构建版本，开...
SQL 入门篇之什么是别名？
下面的 SQL 语句指定了两个别名，一个是 name 列的别名，一个是 country 列的别名。**提示：**如果列名称包含空格，要求使用双引号或方括号：
windows上传ipa文件到app store的方法​
在使用H5混合开发的app打包后，需要将ipa文件上传到appstore进行发布，就需要去苹果开发者中心进行发布。​
SQL AND & OR 运算符
+----+--------------+---------------------------+-------+---------+
C++ 数组
数组的声明并不是声明一个个单独的变量，比如 number0、number1、...、number99，而是声明一个数组变量，比如 numbers，然后使用 nu...
最全iOS 应用上架流程提交到AppStore
第一步：到appuploader官网下载辅助工具和iCloud驱动，使用前面创建的AppID登录。
SQL ALTER TABLE 语句
如需删除表中的列，请使用下面的语法（请注意，某些数据库系统不允许这种在数据库表中删除列的方式）：
dism操作巨慢
前不久在制作win11pe，制作了一版，1.26GB，太大了，不满意，想再裁剪下，发现这次dism mount正常，commit或discard巨慢，以前都很快...
三种方法卸载Symantec Endpoint Protection 赛门铁克
赛门铁克各个版本概览：https://knowledge.broadcom.com/external/article?legacyId=tech163829
python3.6、python3.10用什么版本的pip
实测Python 3.6.6用pip 21.3.1，再高就报错了，Python 3.10.7用pip 22.3.1是可以的
博通和诺顿
Broadcom Corporation （博通公司，股票代号AVGO）是全球领先的有线和无线通信半导体公司。其产品实现向家庭、 办公室和移动环境以及在这些环境...
高版本c4d在低版本windows系统上打开后不显示窗格
发现个问题，server2016上安装了c4d这些版本，低版本的正常显示窗格，但红色圈出的高版本c4d打开后不显示窗格，
基础网络windows不要使用TAT、如何卸载TAT
TAT：https://cloud.tencent.com/document/product/1340
pythonJavaScriptjavaHTMLPHPreactjsC#AndroidCSSNode.jssqlrpython-3.xMysqLjQueryc++pandasFlutterangularIOSdjangolinuxswifttypescript路由器JSON路由器设置无线路由器h3c华三华三路由器设置华三路由器电脑软件教程arraysdocker软件图文教程Cvue.jslaravelspring-boot