简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Home > List of blog posts > 实例演示flex容器与项目中常用的属性
Blogger Information
Blog 8
fans 1
comment 0
visits 6633
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容器与项目中常用的属性
JOAblog
Original
399 people have browsed it

实例演示flex容器与项目中常用的属性

  1. dispaly:flex实现了什么？
    将元素属性转换为flex弹性盒子，布局更方便简单。

flex项目在主轴上的排列方式

项目在主轴上默认的是行排列，也就是flex-direction:row-reverse

图示：

每个项目都有最小的宽度，当我们宽度不够的时候可以利用flex-wrap允许换行转为多行容器

图示：

也可以通过flex-direction:row-reverse来改变主轴的方向为垂直

图示：

而所谓的在主轴上对齐即将所剩的空间在项目之间进行分配

在主轴上左对齐：justify-content:flex-start;

图示：

在主轴上右对齐：justify-content:flex-end;

图示：

在主轴上居中对齐：justify-content:center;

图示：

在主轴上两端对齐：justify-content:space-between;

图示：

在主轴上两端对齐：justify-content:space-around;(项目之间为两倍空间)

图示：

在主轴上平均对齐：justify-content:space-evenly;(项目之间空间相等)

图示：


同理，交叉轴上的对齐方式也可以运用
align-items:对齐方式;来进行对齐
以上就是flex项目中常用的一些属性
代码实现：

  1. <!DOCTYPE html>
  2. <html lang="en">
  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布局属性
  8.     </title>
  9. </head>
  10. <style>
  11.     *{
  12.         padding: 0;margin: 0;box-sizing: border-box;
  13.         /* 初始化网页格式 */
  14.     }
  15.     :root{
  16.         font-size: 10px;
  17.         /* 初始化网页字体格式 */
  18.     }
  19.     body{
  20. font-size: 1.6rem;
  21. /* 还原body中的字体大小 */
  22.     }
  23. .ys{
  24.     /* 给class为ys的标签添加一个像素的实线边框 */
  25.     border:1px solid;
  26.     /* 给class为ys的标签添加一个高度 */
  27.     height: 50rem;
  28.       /* 给class为ys的标签转为flex布局 */
  29.     display: flex;
  30.     /* 项目在主轴上左对齐 */
  31.     justify-content: flex-start;
  32.     /* 项目在主轴上右对齐 */
  33.     justify-content:flex-end;
  34.      /* 项目在主轴上居中对齐 */
  35.     justify-content:center;
  36.      /* 项目在主轴上两端对齐 */
  37.     justify-content:space-between;
  38.      /* 项目在主轴上分散对齐 */
  39.     justify-content:space-around;
  40.      /* 项目在主轴上平均对齐 */
  41.     justify-content:space-evenly;
  43. }
  44. .ys .itemes{
  45.     width: 10rem;
  46.     border:1px solid;
  47.     background-color:aquamarine;
  48. }
  49. </style>
  50. <body>
  51.     <div class="ys">
  52.     <div class="itemes">itemes1</div>
  53.     <div class="itemes">itemes2</div>
  54.     <div class="itemes">itemes3</div>
  55.     <div class="itemes">itemes4</div>
  56. </div>
  57. </body>
  58. </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
About us Disclaimer Sitemap
php.cn：Public welfare online PHP training，Help PHP learners grow quickly！