前端的学习之路：初级CSS---弹性容器上的样式02

最新推荐文章于 2022-03-25 16:16:43 发布
最新推荐文章于 2022-03-25 16:16:43 发布
阅读量126 收藏
点赞数
分类专栏： 初级CSS 文章标签： css 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44647555/article/details/113895347
版权

弹性容器上的样式02

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>弹性容器上的样式02</title>
    <!-- <link rel="stylesheet" href="../chujicss/css/12.01.07.02.css"> -->
    <style>
        * {
            margin: 0;
            padding: 0;
            list-style: none;
        }

        ul {
            width: 600px;
            height: 800px;
            border: 10px red solid;
            /* 设置ul为弹性容器 */
            display: flex;
            /* flex-direction: row;默认值时自左向右排列 */

            /* flex-wrap: 
                设置元素是否在弹性容器中自动换行
                可选值：
                    nowrap 默认值，元素不会自动换行
                    wrap:元素沿着辅轴方向自动换行
                    wrap-reverse：元素沿着辅轴反方向自动换行 
            */
            flex-wrap: wrap;
            /* flex-wrap: wrap; */
            /* flex-flow: wrap 和 direction 的简写属性; */
            /* flex-flow: wrap row; */

            /* 
            justify-content
                -如何分配主轴上的空白空间（主轴上的元素如何排列）
                -可选值：
                    flex-start 元素沿着主轴 起边排列
                    flex-end 元素沿着主轴终边排列
                    center  元素居中排列
                    space-around 空白分布到元素两侧
                    space-between 空白均匀分布到元素间
                    space-evenly 空白 分布到元素的单侧
            */
            /* justify-content: flex-start; */
            /* justify-content: flex-end; */
            /* justify-content: space-around ; */
            /* justify-content: space-between; */
            /* justify-content: space-evenly; */

            /* 
            align-items:
                -元素在辅轴上如何对齐
                -元素间的关系
                -可选值：
                    stretch 默认值 将元素的长度设置为相同的值（行与行之间的高度）
                    例：第一行中 1 2 3 的高度是一样的
                        第二行中 4 5 的高度是一样的

                    flex-start 元素不会拉伸，沿着 辅轴起边对齐
                    flex-end 沿着辅轴终边对齐
                    center 居中对齐 
                    baseline 基线对齐   
                        */
            /* align-items: flex-start; */
            /* align-items: flex-end; */
            /* align-items: center ; */
            /* align-items: baseline; */

            /* 要想设置一个元素水平居中对齐，就这样设置
            justify-content:center;
            align-items:center;
            */
            /* align-content :辅轴空白空间的分布*/
            /* align-content: center; */

        }

        li {
            width: 200px;

            line-height: 100px;
            background-color: #bfa;
            font-size: 50px;
            text-align: center;
            flex-shrink: 0;
        }

        li:nth-child(1) {
            /* align-self :用来覆盖当前弹性元素的align-items*/
            align-self: center;

        }

        li:nth-child(2) {
          
            background-color: pink;

        }

        li:nth-child(3) {
            
            background-color: orange;
        }

        li:nth-child(4) {
           
            background-color: yellowgreen;
        }

        li:nth-child(5) {
            
            background-color: orchid;
        }
    </style>
</head>

<body>
    <ul>
        <li>1</li>
        <li>
            2
            <div>2</div>
        </li>
        <li>
            3
            <div>3</div>
            <div>3</div>
        </li>

        <li>4</li>
        <li>
            5
            <div>5</div>
        </li>
    </ul>
</body>

</html>

运行结果为：
在这里插入图片描述

new-SkyWaller
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
情感：:woman:CSSCSS-in-JS库专为高性能样式合成而设计
02-05
它基于许多其他CSS-in-JS库，可让您使用字符串或对象样式快速对应用程序进行样式设置。 它具有可预测的组成，可以避免CSS的特异性问题。 借助源地图和标签，Emotion具有出色的开发人员体验和出色的性能，并且在生产...
CSS样式：弹性容器上的样式
那人独钓寒江雪
07-10 129
弹性容器上的样式
css样式布局
qq_46239275的博客
03-25 1195
css布局
html--div+css样式布局(div+span)
别浪
12-05 2743
目录 简述 盒模型: 布局相关属性 简述 div是块级元素 (占用一整行) span是内联元素(占用内容的长度,也可以转换成块级元素) DIV和SPAN存在的意义就是为了应用css样式 &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8" /&gt; &lt;meta ht...
02-css基础 --highgh的博客 --HTML学习笔记
highgh的博客
08-13 126
02-css基础css的基础概念css的选择器css的盒模型布局css元素之间的转换css的定位浮动属性 css的基础概念 层叠样式表，是一种用来渲染HTML（超文本标记性语言）文件样式的计算机语言。 在HTML元素的style属性中 在head标签里的style标签中 以单独存放在一个CSS文件中 css的选择器 元素选择器 标签选择器 div id选择器 #div 类名选择器 .div 派生选择器 后代选择器 div span 父子选择器 div
一个非常实用的 div 容器样式
weixin_34000916的博客
12-14 174
<divid="Div1"style="BORDER-RIGHT:whitethininset;BORDER-TOP:whitethininset;OVERFLOW:auto;BORDER-LEFT:whitethininset;WIDTH:90%;BORDER-BOTTOM:whitethininset;...
前端的学习之路：初级CSS---弹性容器上的样式03
weixin_44647555的博客
02-20 102
弹性容器上的样式03 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>弹性容器上的样式03</title> <style>
前端的学习之路：初级CSS---弹性容器上的样式01
weixin_44647555的博客
02-20 131
弹性容器上的样式01 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>弹性容器上的样式01</title> <!-- <link rel="styl
前端面试题总结-初级
Ly
03-14 4169
HTTP协议 说一下 http 和 http ？ http 是超文本传输协议，信息是明文传输 Https 是加密的、协议需要 ca 证书，费用较高。 https缺点： https 握手阶段比较费时，会使页面加载时间延长 50%，增加 10%~20%的耗电。 https 缓存不如 http 高效，会增加数据开销。 SSL 证书也需要钱，功能越强大的证书费用越高。 SSL 证书需要绑定 IP，不能再同一个 ip 上绑定多个域名，ipv4 资源支持不了这种消耗。 tcp 三次握手，一句话概括 TCP
Web前端开发基础：CSS控制-标记制作导航菜单.ppt
06-06
--*-- 1 单元目标 2 教学内容 3 动手实践 4 课堂小结 单元目标 CSS控制标记制作导航菜单 能力目标 学会使用 CSS控制标记 知识目标 《CSS网页样式设计与制作》 参考资料 2 教学内容 1 单元目标 3 动手实践 4 课堂小结...
babel-plugin-postcss-css-modules:PostCSS 的 Babel CSS 模块
05-29
PostCSS 的 Babel CSS 模块 Babel 插件通过享受 css 模块和处理 CSS 文件 import styles from './styles' ; . example { color : cyan; } 进入具有反映样式名称的属性的对象： var styles = { "example" : "_...
animate-css-styled-components:动画css的简单端口，用于样式组件
05-11
动画CSS样式的组件动画css的简单端口，用于样式组件安装安装animate-css-styled-components [sudo] npm i --save animate-css-styled-components如何使用导入animate-css-styled-components模块，调用全局动画import...
animate-css-grid：CSS网格的无痛过渡
02-23
动画CSS网格 无缝设置所有CSS网格属性的动画，包括： grid-column和grid-row grid-template-columns grid-gap 使用此脚本可以轻松地将CSS网格从一种状态优雅地过渡到另一种状态。 如果网格的内容发生更改，或者通过...
前端的学习之路：初级CSS---Z轴平移
weixin_44647555的博客
02-10 1269
Z轴平移 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Z轴平移</title> <!-- <link rel="stylesheet" href=
前端的学习之路：初级CSS---米兔练习
weixin_44647555的博客
02-09 976
米兔练习 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>米兔练习</title> <!-- <link rel="stylesheet" href=
前端的学习之路：初级CSS---奔跑的少年(动画练习)
weixin_44647555的博客
02-10 969
奔跑的少年(动画练习) <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>奔跑的少年(动画练习)</title> <!-- <link rel="sty
前端的学习之路：初级CSS---iconfont
weixin_44647555的博客
02-08 653
iconfont <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>iconfont</title> <link rel="stylesheet" href=
前端的学习之路：初级CSS---使用after伪类解决高度塌陷问题
weixin_44647555的博客
02-05 372
使用after伪类解决高度塌陷问题 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>使用after伪类解决高度塌陷问题</title> <!-- <l
这块前端代码input::-webkit-input-placeholder { color: red; }用jquery怎么写
最新发布
06-03
你可以使用以下代码用 jQuery 实现同样的效果： ...$("input::-webkit-input-placeholder").css("color", "red"); ``` 这将选中所有 input 元素的 WebKit 浏览器专用的 placeholder 文本，并将其颜色设置为红色。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值