Community Learn Tools Library Leisure
search
English
Home > List of blog posts > flex容器与项目
Blogger Information
Blog 12
fans 0
comment 2
visits 6326
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
flex容器与项目
白鸽
Original
562 people have browsed it

flex容器与项目

flex术语，容器，项目，主轴，交叉轴
容器：display:flex做一个标签或div盒子里声明。
项目：flex标签或div下的子标签.
主轴：子标签在容器里的排列方向。

交叉轴。子标签在容器里垂直排列方向。

下面演示了，两次使用flex的效果，
第一次使用在<body>标签里，column 让两个项目垂直居中排列
第二次，在div class="container"里使用，
做一个两端对齐，看起来像导航条的部件。
内部项目垂直居中两端对齐，
项目文字居中对齐。
三，垂直排列项目box 只是展示了column的排列方式，内容默认左对齐。
flex

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>flex布局技术案例</title>
  8.     <style>
  9.         *{
  10.             margin:0;
  11.             padding:0;
  12.             box-sizing:border-box;
  13.         }
  14.         html{
  15.             font-size: 100px;
  16.         }
  17.         body{
  18.             font-size: 0.16rem;
  19.             display: flex;
  20.             flex-flow:column wrap;
  21.             align-items:center;
  23.         }
  24.         .container{
  25.             display:flex;
  26.             width: 12rem;
  27.             height: 1rem;
  28.             flex-flow:row nowrap;
  29.             place-content:space-between;
  30.             place-items:center;
  31.             background-color: cornflowerblue;
  32.         }
  33.         .container > .item{
  34.             background:#ccc;
  35.             width: 1rem;
  36.             text-align: center;
  37.             flex:0 1 auto;
  39.         }
  40.         .box{
  41.             background-color: aqua;
  42.             width: 12rem;
  43.         }
  45.     </style>
  46. </head>
  47. <body>
  48.     <div class="container">
  49.         <div class="item">item-1</div>
  50.         <div class="item">item-2</div>
  51.         <div class="item">item-3</div>
  52.         <div class="item">item-4</div>
  53.         <div class="item">item-5</div>
  54.         <div class="item">item-6</div>
  55.         <div class="item">item-7</div>
  56.         <div class="item">item-8</div>
  58.     </div>
  59.     <div class="box">我是另外一个box,我因为body里的flex设置而居中显示<br><br></div>
  61. </body>
  62. </html>
Correcting teacher：PHPzPHPz

Correction status：qualified

Teacher's comments：完成的不错，继续加油
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post