CSS——弹性盒子相关知识点

文章目录

• 前言
• 一、弹性盒子
• 二、弹性元素的样式
• 三、相关知识点补充
• 总结

---

前言

       本文主要介绍的是有关弹性盒子的相关知识点，对这一部分知识点不太清楚的同学可以驻足观看一下。

---

一、弹性盒子

1.什么是弹性盒子？

css中的一个布局手段，用来代替浮动来完成页面的布局，flex可以让元素具有弹性，让元素可以跟随页面的大小的改变而改变

2.什么是弹性容器？

通过   display   来设置弹性容器

display:  flex;  设置为块级弹性容器,内部元素会自左向右排列

display: inline-flex;    设置为行内的弹性容器,元素之间会有缝隙

 .box{

            width: 400px;

            height: 500px;

            border: 2px solid black;

            display: flex;

        }

3.什么是弹性元素？

    弹性容器的直接子元素是弹性元素（弹性项）

    一个元素可以同时是弹性容器和弹性元素 

4.弹性元素的相关属性：

   flex-grow   指定弹性元素伸展的系数

                        父元素的剩余空间，会按照比例进行分配

   flex-shrink   指定弹性元素的收缩系数

                        当父元素中的空间不足以容纳所有的子元素时，会对子元素进行收缩

flex-direction   指定容器中弹性元素的排列方式（排列方向）

可选值：  row默认值，弹性元素在容器中水平排列（左向右）  主轴： 自左向右

                row-reverse   弹性元素在容器中反向水平排列（右向左）  主轴： 自右向左

             column   弹性元素纵向排列 （自上向下）   主轴： 自上向下

            column-reverse     弹性元素方向纵向排列 （自下向上）   主轴： 自下向上

主轴（row）：弹性元素的排列方向成为主轴 

 侧轴(column)： 与主轴垂直方向的称为侧轴

---

二、弹性元素的样式

 

1.元素在主轴上的对齐方式

flex-flow:   设置弹性元素是否在弹性容器中自动换行

可选值：

1. nowrap   默认值，元素不会自动换行
2. wrap    元素沿着主轴方向自动换行
3. wrap-reverse    元素沿着辅轴方向换行

简写属性： flex-flow :    wrap   和   direction   的简写属性      flex-flow:  row   wrap;

justify-content： 如何分配主轴上的空白空间（主轴上的元素如何排列）

可选值：

1. flex-start   元素沿着主轴起边排列
2. flexx-end   元素沿着主轴终边排列
3. center   元素居中排列
4. space-around   空白分布在元素两侧
5. space-between   空白均匀份分布到元素间
6. space-evenly  空白分布到元素的单侧

如下图是给元素设置 space-between  （空白均匀份分布到元素）  的效果

 

  2.元素在辅轴上的对齐方式

align-items  元素在辅轴上的对齐方式

可选值：

1. stretch   默认值，将元素的长度设置为相同的值
2. flex-start   元素不会拉伸，沿着辅轴起边对齐
3. flex-end      沿着辅轴的终边对齐
4. center   居中对齐
5. baselinne 基线对齐

align-self:   用来覆盖当前弹性元素上的align-items

align-content  辅轴空白空间的分布

1. flex-start    元素沿着辅轴起边排列
2. flexx-end   元素沿着辅轴终边排列
3. center   元素居中排列
4. space-around   空白分布在元素两侧
5. space-between   空白均匀份分布到元素间
6. space-evenly  空白分布到元素的单侧

3.其他相关样式设置

flex-basis  指定的是元素在主轴上的基础长度

    如果主轴是   横向的  则    该值指定的就是元素的宽度

    如果主轴是   纵向的  则    该值指定的是就是元素的高度

       默认值是　　auto   表示参考元素自身的高度或宽度

       如果传递了一个具体的数值，则以该值为准

flex   可以设置弹性元素所有的三个样式

       flex   增长  缩减   基础；(必须按照这三个顺序)

简写属性：

flex:    initial/auto/none；

1. initial"flex: 0  1  auto"
2. auto  "flex:  1   1   auto"
3. none   "flex:   0   0  auto"   元素没有弹性

order  决定弹性元素的排列顺序  例如： order: 2;     指定此元素的排列顺序为第二个

---

三、相关知识点补充

像素

前端开发中像素要 分成两种情况讨论：    CSS像素      物理像素

屏幕的分辨率属于物理像素，CSS像素，编写网页时，我们所用为CSS像素，浏览器在显示网页时，需要将CSS像素转换为物理像素然后再呈现，一个CSS像素最终由几个物理像素显示，  由浏览器决定 ，默认情况在PC 端，一个CSS 像素 =  一个物理像素

视口（viewport）

就是屏幕中用来显示网页的区域，通过查看视口的大小，来观察CSS和物理像素的比值

默认情况下

视口宽度    (CSS像素） ：1920PX      （物理像素）1920px   两者的比值为  1：1

                 (CSS像素） ：960PX      （物理像素）1920px   两者的比值为  1：2

手机像素

默认情况下，移动端的网页都会将视口设置为980像素（css像素  )  以确保pc  端网页 可以在移动端正常访问，但如果网页的宽度超过了  980p网页,  移动端的浏览器会自动对网页缩放以完整显示网页 

大部分网站会专门为移动端设计网页

  

vw（viewport width）

vw表示的是视口的宽度（viewport width）, vw这个单位永远相当于视口宽度进行计算

网页中最小字体是12px，不能设置比12px更小的字体

100vw  =    一个视口的宽度

1vw  =    1%   视口宽度

5.3333vw   =    40px  

1rem  =   40px

响应式布局

 网页可以根据不同的设备或窗口大小呈现出不同的效果、关键就是媒体查询

 

语法： @media   查询规则{ }

    媒体类型： 

  all   所有设备      print   打印设备      screen   带屏幕的设备       speech   屏幕阅读器

  可以使用链接多个媒体类型，这样他们之间就是一个或的关

 可以在媒体类型前添加一个only   表示仅仅在此设备才可生效，目的是为了兼容一些老版本浏览器

@media only screen{

       body{

      background-color: #bfa;

          }

}

媒体特性

 width:  视口的宽度

height: 视口的高度的 

min-width:   视口的最小宽度（视口大于指定宽度时生效）

max-width:  视口的最大宽度 (视口小于指定宽度时生效）

样式切换额分界点，称其为断点，也就是网页的样式会在这个点时发生变化，一般比较常用的断点下：

小于 768  超小屏幕  max-width=768px

大于768  小屏幕   min-width=768px

大于992   中型屏幕 min-width=992px

大于1200  大屏幕   min-width-1200px

@midia only screen and(min-width: 500px) and (max-width: 700px){

     body{

          background-color: #bfa;

        }

      }

(min-width: 500px) and (max-width: 700px)    屏幕宽度在500px与700px 之间生效

(min-width: 500px) , (max-width: 700px)   屏幕宽度在大于500px 或者   屏幕宽度在小于700px 生效

---

总结

       好了，今天就写到这儿吧，屏幕前的你要记得开心哦，祝你也祝我吧，拜~