CSS弹性盒子知识点

简介: CSS弹性盒子知识点

一、弹性盒子


1.什么是弹性盒子?


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

2.什么是弹性容器?


通过   display   来设置弹性容器


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


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


c8261d062839b10a09cb8f30e09a9904_44aa80aa928932f6ad54f0d81740b191.png


3.什么是弹性元素?


   弹性容器的直接子元素是弹性元素(弹性项)


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

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


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


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


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


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


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


可选值:  row默认值,弹性元素在容器中水平排列(左向右)  主轴: 自左向右


               row-reverse   弹性元素在容器中反向水平排列(右向左)  主轴: 自右向左


            column   弹性元素纵向排列 (自上向下)   主轴: 自上向下


           column-reverse     弹性元素方向纵向排列 (自下向上)   主轴: 自下向上


主轴(row):弹性元素的排列方向成为主轴


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


二、弹性元素的样式



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

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

可选值:


   nowrap   默认值,元素不会自动换行

   wrap    元素沿着主轴方向自动换行

   wrap-reverse    元素沿着辅轴方向换行


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

justify-content: 如何分配主轴上的空白空间(主轴上的元素如何排列)

可选值:


   flex-start   元素沿着主轴起边排列

   flexx-end   元素沿着主轴终边排列

   center   元素居中排列

   space-around   空白分布在元素两侧

   space-between   空白均匀份分布到元素间

   space-evenly  空白分布到元素的单侧


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

30ff675c6e2957268cbeb35477188880_f99b99c6f63526867f73e95638bf11e2.png


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

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

可选值:


   stretch   默认值,将元素的长度设置为相同的值

   flex-start   元素不会拉伸,沿着辅轴起边对齐

   flex-end      沿着辅轴的终边对齐

   center   居中对齐

   baselinne 基线对齐


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

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


   flex-start    元素沿着辅轴起边排列

   flexx-end   元素沿着辅轴终边排列

   center   元素居中排列

   space-around   空白分布在元素两侧

   space-between   空白均匀份分布到元素间

   space-evenly  空白分布到元素的单侧


3.其他相关样式设置

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

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

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

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

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

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

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

简写属性:

flex:    initial/auto/none;


   initial"flex: 0  1  auto"

   auto  "flex:  1   1   auto"

   none   "flex:   0   0  auto"   元素没有弹性


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

相关实践学习
基于ACK Serverless轻松部署企业级Stable Diffusion
本实验指导您在容器服务Serverless版(以下简称 ACK Serverless )中,通过Knative部署满足企业级弹性需求的Stable Diffusion服务。同时通过对该服务进行压测实验,体验ACK Serverless 弹性能力。
Kubernetes极速入门
Kubernetes(K8S)是Google在2014年发布的一个开源项目,用于自动化容器化应用程序的部署、扩展和管理。Kubernetes通常结合docker容器工作,并且整合多个运行着docker容器的主机集群。 本课程从Kubernetes的简介、功能、架构,集群的概念、工具及部署等各个方面进行了详细的讲解及展示,通过对本课程的学习,可以对Kubernetes有一个较为全面的认识,并初步掌握Kubernetes相关的安装部署及使用技巧。本课程由黑马程序员提供。   相关的阿里云产品:容器服务 ACK 容器服务 Kubernetes 版(简称 ACK)提供高性能可伸缩的容器应用管理能力,支持企业级容器化应用的全生命周期管理。整合阿里云虚拟化、存储、网络和安全能力,打造云端最佳容器化应用运行环境。 了解产品详情: https://www.aliyun.com/product/kubernetes
相关文章
|
2月前
|
机器学习/深度学习 前端开发 JavaScript
|
25天前
|
移动开发 前端开发 JavaScript
[HTML、CSS]知识点
本文涵盖前端知识点扩展、HTML标签(如video、input、canvas)、datalist和details标签的使用方法,以及CSS布局技巧(如margin、overflow: hidden和动态height)。文章旨在分享作者的学习经验和实用技巧。
30 1
[HTML、CSS]知识点
|
2月前
|
前端开发
CSS网页布局综合练习(涵盖大多CSS知识点)
CSS网页布局综合练习(涵盖大多CSS知识点)
|
2月前
|
前端开发
CSS网页布局综合练习(涵盖大多CSS知识点)
CSS网页布局综合练习(涵盖大多CSS知识点)
|
2月前
|
前端开发 UED
如何使用css给一个盒子加上好看的hover阴影效果
如何使用css给一个盒子加上好看的hover阴影效果
78 1
|
3月前
|
Web App开发 前端开发 JavaScript
「offer来了」1张思维导图,6大知识板块,带你梳理面试中CSS的知识点!
该文章通过一张思维导图和六大知识板块系统梳理了前端面试中涉及的CSS核心知识点,包括CSS框架、基础样式问题、布局技巧、动画处理、浏览器兼容性及性能优化等方面的内容。
|
5月前
|
前端开发 容器
你不知道的css——1. 外在盒子、内在盒子,宽度和高度的计算,box-sizing属性
你不知道的css——1. 外在盒子、内在盒子,宽度和高度的计算,box-sizing属性
32 3
你不知道的css——1. 外在盒子、内在盒子,宽度和高度的计算,box-sizing属性
|
6月前
|
前端开发 编译器
CSS定位(如果想知道CSS有关定位的知识点,那么只看这一篇就足够了!)
CSS定位(如果想知道CSS有关定位的知识点,那么只看这一篇就足够了!)
|
6月前
|
前端开发
CSS常用属性之(列表、表格、鼠标)属性,(如果想知道CSS的列表、表格、鼠标相关的属性知识点,那么只看这一篇就足够了!)
CSS常用属性之(列表、表格、鼠标)属性,(如果想知道CSS的列表、表格、鼠标相关的属性知识点,那么只看这一篇就足够了!)
|
6月前
|
前端开发
CSS基础之伪元素选择器(如果想知道CSS的伪元素选择器知识点,那么只看这一篇就足够了!)
CSS基础之伪元素选择器(如果想知道CSS的伪元素选择器知识点,那么只看这一篇就足够了!)