1222 flex的简单练习 - CSS - php中文网博客

首页 > 博客列表 > 1222 flex的简单练习

博主信息

博文 15

粉丝 0

访问量 12130

专题推荐

更多>

最新下载

更多>

网站特效

网站源码

网站素材

前端模板

1222 flex的简单练习

fanyigle_php

原创

925人浏览过

定位的布局思路练习

<!DOCTYPE html>
<html lang="zh-CN">
<head>
 <meta charset="UTF-8" />
 <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 <title>定位的布局思路练习</title>
 <!--
     1.确定文档结构
     2.样式的初始化
     3.分块的样式设定
 -->
 <style>
   * {
     margin: 0;
     padding: 0;
     box-sizing: border-box;
   }
   header {
     background-color: antiquewhite;
     min-height: 10em;
   }
   .container {
     min-height: 20em;
     position: relative;
     margin: 1em 0;
   }
   .container aside:first-of-type {
     min-height: inherit;
     width: 5em;
     background-color: hotpink;
     position: absolute;
     top: 0;
     left: 0;
   }
   .container aside:last-of-type {
     min-height: inherit;
     width: 5em;
     background-color: darkgoldenrod;
     position: absolute;
     top: 0;
     right: 0;
   }
   .container main {
     min-height: inherit;
     background-color: darkmagenta;
     /* padding: 0 5em; */
     position: absolute;
     left: 5em;
     right: 5em;
     margin: 0 0.5em;
   }
   footer {
     background-color: aquamarine;
     min-height: 10em;
   }
 </style>
</head>
<body>
 <header>头部</header>
 <div class="container">
   <aside>左侧</aside>
   <main>主题</main>
   <aside>右侧</aside>
 </div>
 <footer>尾部</footer>
</body>
</html>

flex实现水平和垂直居中

<!DOCTYPE html>
<html lang="zh-CN">
<head>
 <meta charset="UTF-8" />
 <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 <title>flex实现水平和垂直居中</title>
 <style>
   .box {
     width: 15em;
     height: 15em;
     background-color: aquamarine;
     position: relative;
   }
   .box .item {
     width: 5em;
     height: 5em;
     background-color: yellow;
     position: absolute;
   }
   /* .box .item {
     width: 5em;
     height: 5em;
     background-color: yellow;
     position: absolute;
     left: 0;
     top: 0;
     right: 0;
     bottom: 0;
     margin: auto;
   } */
   .box {
     display: flex;
     justify-content: center;
     align-items: center;
   }
 </style>
</head>
<body>
 <div class="box">
   <div class="item"></div>
 </div>
</body>
</html>

用flex写三列

<!DOCTYPE html>
<html lang="zh-CN">
<head>
 <meta charset="UTF-8" />
 <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 <title>flex写三列</title>
 <style>
   * {
     box-sizing: border-box;
   }
   /*实体元素改色可见*/
   body *:not(.container) {
     background-color: antiquewhite;
   }
   header,
   footer {
     height: 10vh;
   }
   .container {
     height: calc(80vh - 1em);
     margin: 0.5em 0;
     display: flex;
   }
   .container aside {
     min-width: 15em;
   }
   .container main {
     min-width: calc(100vw - 30em - 2em);
     margin: 0 1em;
   }
 </style>
</head>
<body>
 <header>头部</header>
 <div class="container">
   <aside>左侧</aside>
   <main>主题</main>
   <aside>右侧</aside>
 </div>
 <footer>尾部</footer>
</body>
</html>

grid写三行三列

<!DOCTYPE html>
<html lang="zh-CN">
<head>
 <meta charset="UTF-8" />
 <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 <title>grid写三行三列</title>
 <style>
   body {
     height: 100vh;
     display: grid;
     grid-template-columns: 10em 1fr 10rem;
     grid-template-rows: 10vh 1fr 10vh;
     gap: 0.5em;
   }
   body > * {
     background-color: aqua;
   }
   header,
   footer {
     grid-column: span 3;
   }
 </style>
</head>
<body>
 <header>头部</header>
 <aside>左侧</aside>
 <main>主题</main>
 <aside>右侧</aside>
 <footer>尾部</footer>
</body>
</html>

弹性容器与子项目

<!DOCTYPE html>
<html lang="zh-CN">
<head>
 <meta charset="UTF-8" />
 <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 <title>弹性容器与子项目</title>
 <style>
   * {
     box-sizing: border-box;
   }
   .container {
     display: flex;
     height: 20em;
     padding: 1em;
     border: 1em dotted blue;
   }
   .item {
     width: 10em;
     height: 6em;
     border: 1px solid red;
   }
   .item:last-of-type {
     display: flex;
   }
   .subitem {
     border: 2px dashed green;
   }
 </style>
</head>
<body>
 <div class="container">
   <div class="item">item1</div>
   <div class="item">item2</div>
   <div class="item">
     item3
     <div class="subitem">subitem1</div>
     <div class="subitem">subitem2</div>
     <div class="subitem">subitem3</div>
   </div>
 </div>
</body>
</html>

项目的排列和换行

<!DOCTYPE html>
<html lang="zh-CN">
<head>
 <meta charset="UTF-8" />
 <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 <title>项目的排列和换行</title>
 <style>
   .container {
     display: flex;
     /* flex-direction: row;
     flex-wrap: wrap; */
     flex-flow: row wrap;
     height: 20em;
     /* width: 10em; */
     padding: 1em;
     border: 2px solid green;
   }
   .item {
     width: 5em;
     height: 4em;
     border: 1px solid red;
   }
 </style>
</head>
<body>
 <div class="container">
   <div class="item">item1</div>
   <div class="item">item2</div>
   <div class="item">item3</div>
   <div class="item">item4</div>
   <div class="item">item5</div>
   <div class="item">item6</div>
   <div class="item">item7</div>
   <div class="item">item8</div>
 </div>
</body>
</html>

项目在容器内的横纵对齐方式

<!DOCTYPE html>
<html lang="zh-CN">
<head>
 <meta charset="UTF-8" />
 <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 <title>项目在容器内的横纵对齐方式</title>
 <!--
     对齐解决的是项目和留白区域的划分
     1.项目在主轴上和交叉轴上有剩余空间则可以使用对齐,调整项目的位置;
 -->
 <style>
   .container {
     display: flex;
     /* flex-direction: row;
     flex-wrap: wrap; */
     flex-flow: row wrap;
     height: 20em;
     /* width: 10em; */
     padding: 1em;
     border: 2px solid green;
   }
   .item {
     width: 5em;
     height: 4em;
     border: 1px solid red;
   }
   .container {
     /*主轴上的对齐方式,水平移动*/
     /*1.所有项目无间隙排列*/
     justify-content: flex-start;
     justify-content: flex-end;
     justify-content: center;
     /*2.每个项目左右都有间隙*/
     justify-content: space-around;
     justify-content: space-between;
     justify-content: space-evenly;
     /*交叉轴上的对齐,垂直移动*/
     align-items: stretch;
     align-items: flex-start;
     align-items: flex-end;
     align-items: center;
   }
 </style>
</head>
<body>
 <div class="container">
   <div class="item">item1</div>
   <div class="item">item2</div>
   <div class="item">item3</div>
   <div class="item">item4</div>
   <div class="item">item5</div>
   <div class="item">item6</div>
   <div class="item">item7</div>
 </div>
</body>
</html>

多行项目在容器内的横纵对齐方式

<!DOCTYPE html>
<html lang="zh-CN">
<head>
 <meta charset="UTF-8" />
 <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 <title>多行项目在容器内的横纵对齐方式</title>
 <!--
     对齐解决的是项目和留白区域的划分
     1.项目在主轴上和交叉轴上有剩余空间则可以使用对齐,调整项目的位置;
 -->
 <style>
   .container {
     display: flex;
     /* flex-direction: row;
     flex-wrap: wrap; */
     flex-flow: row wrap;
     height: 20em;
     /* width: 10em; */
     padding: 1em;
     border: 2px solid green;
   }
   .item {
     width: 5em;
     height: 4em;
     border: 1px solid red;
   }
   .container {
     /*主轴上的对齐方式,水平移动*/
     /*1.所有项目无间隙排列*/
     justify-content: flex-start;
     justify-content: flex-end;
     justify-content: center;
     /*2.每个项目左右都有间隙*/
     /* justify-content: space-around;
     justify-content: space-between;*/
     justify-content: space-evenly;
     /*交叉轴上的对齐,垂直移动*/
     /*align-items先切割成多行,然后处理每行的交叉轴对齐*/
     align-items: stretch;
     align-items: flex-start;
     align-items: flex-end;
     /* align-items: center; */
     /*多行项目沿交叉轴无间隙,整体移动*/
     /* align-content: flex-end;
     align-content: flex-start; */
     /* align-content: center; */
     /*多行项目沿交叉轴有间隙调整*/
     /* align-content: space-between;
     align-content: space-evenly;*/
     align-content: space-around;
   }
 </style>
</head>
<body>
 <div class="container">
   <div class="item">item1</div>
   <div class="item">item2</div>
   <div class="item">item3</div>
   <div class="item">item4</div>
   <div class="item">item5</div>
   <div class="item">item6</div>
   <div class="item">item7</div>
   <div class="item">item8</div>
   <div class="item">item9</div>
   <div class="item">item10</div>
   <div class="item">item11</div>
   <div class="item">item12</div>
 </div>
</body>
</html>

项目的flex属性\order属性\align-self属性

<!DOCTYPE html>
<html lang="zh-CN">
<head>
 <meta charset="UTF-8" />
 <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 <title>项目的flex属性\order属性\align-self属性</title>
 <!--改变项目大小\交叉轴对齐\在容器中的顺序-->
 <style>
   .container {
     display: flex;
     /* flex-direction: row;
                 flex-wrap: wrap; */
     flex-flow: row nowrap;
     height: 20em;
     /* width: 10em; */
     padding: 1em;
     border: 2px solid green;
   }
   .item {
     width: 5em;
     /* height: 4em; */
     border: 1px solid red;
   }
   .container .item {
     /* 默认值 */
     flex: 0 1 auto;
     flex: initial;
     /*允许放大*/
     flex: 1 1 auto;
     flex: auto;
     flex: 1;
     /*禁止放大和缩小*/
     flex: 0 0 auto;
     flex: none;
     /*test*/
     flex: 3;
   }
   .container > .item:last-of-type,
   .container > .item:nth-of-type(2) {
     flex: 1;
   }
   /*设置某一个项目在交叉轴上的对齐方式*/
   .container > .item:first-child {
     align-self: flex-start;
   }
   /*项目的order属性*/
   .container .item:nth-child(2) {
     order: -1;
   }
 </style>
</head>
<body>
 <div class="container">
   <div class="item">item1</div>
   <div class="item">item2</div>
   <div class="item">item3</div>
   <div class="item">item4</div>
   <div class="item">item5</div>
   <div class="item">item6</div>
   <div class="item">item7</div>
   <div class="item">item8</div>
   <div class="item">item9</div>
 </div>
</body>
</html>

批改老师：

天蓬老师

批改状态：合格

老师批语：

本博文版权归博主所有，转载请注明地址！如有侵权、违法，请联系admin@php.cn举报处理！

全部评论文明上网理性发言，请遵守新闻评论服务协议

0条评论

作者最新博文

0102 今天开始RHEL8

2021-01-02 22:02:20