首页 > 其他分享 >[CSS]flex弹性盒

[CSS]flex弹性盒

时间:2023-12-26 12:13:23浏览次数:34  
标签:flex 主轴 元素 弹性 li background CSS

先来一个常用的flex样例。

水平从左往右主轴,自动换行,从主轴起始位置开始分布(侧轴不设置,使用margin进行间隔):

.tags {
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
}

.tag_item {
  margin: 10px 12px;
}

 

 

Flex(弹性盒、伸缩盒)是CSS中的又一种布局手段,它主要用来代替浮动来完成页面的布局,使元素具有弹性,让元素可以跟随页面的大小的改变而改变。

display:flex            //设置为块级弹性容器
display:inline-flex     //设置为行内的弹性容器

 

主轴和侧轴

主轴:弹性元素的排列方向称为主轴

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

 

排列方向

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

row              // 默认值,弹性元素在容器中水平排列(自左向右)
row-reverse      // 弹性元素在容器中反响水平排列(自右向左)
column           // 弹性元素纵向排列(自上向下)
column-reverse   // 弹性元素方向纵向排列(自下向上)

 

自动换行

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

nowrap    // 默认值,元素不会自动换行
wrap      // 元素沿着侧轴的方向方向自动换行

 

简写属性

flex-flow 是wrap和direction的简写属性

/* 简写属性 */
flex-flow: row wrap; 

 

主轴空白空间

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

flex-start 元素沿主轴起边排列  
flex-end 元素沿主轴终边排列  
center 元素居中排列  
space-around 空白分布到元素两侧  
space-between 空白分布到元素之间  
space-evenly 空白分布到元素单侧

 

侧轴对齐

align-items 元素在侧轴上如何对齐

stretch

默认值

将元素的长度设置为相同的值(拉伸)

 flex-start 元素不拉伸 ,沿着侧轴起边对齐  
 flex-end 元素不拉伸 ,沿着侧轴终边对齐  
 center 居中对齐   
 baseline 基线对齐   

 

侧轴空白空间

align-content 如何分配侧轴上的空白空间(侧轴上元素如何排列)

类似 justify-content

flex-start 元素沿侧轴起边排列
flex-end 元素沿侧轴终边排列
center 元素居中排列
space-around 空白分布到元素两侧
space-between 空白分布到元素之间
space-evenly 空白分布到元素单侧

 

弹性居中

利用弹性盒对元素进行水平垂直双方向居中

justify-content: center;
align-items: center;

 

*补充:弹性元素的属性(以下不常用)

伸展系数

flex-grow 指定弹性元素的伸展系数,默认值为0

li:nth-child(1) {
    background-color: #bfa;
    flex-grow: 1;
}
li:nth-child(2) {
    background-color: red;
    flex-grow: 2;
}
li:nth-child(3) {
    background-color: green;
    flex-grow: 3;
}

 

缩减系数

flex-shrink 指定弹性元素的收缩系数,默认值为1

li:nth-child(1) {
    background-color: #bfa;
    flex-shrink: 1;
}
li:nth-child(2) {
    background-color: red;
    flex-shrink: 2;
}
li:nth-child(3) {
    background-color: green;
    flex-shrink: 3;
}

 

基础长度

flex-basis 指定元素在主轴上的基础长度(主轴横向-宽度,主轴纵向-高度;默认值auto元素自身的宽/高)

li:nth-child(1) {
    background-color: #bfa;
    flex-basis: 100px;
}

 

简写属性

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

flex: 伸展 缩减 基础

 

排序方式

order 决定弹性元素的排序顺序

li:nth-child(1){
    background-color: #bfa;
    order: 2;
}
li:nth-child(2) {
    background-color: red;
    order: 3;
}
li:nth-child(3) {
    background-color: green;
    order: 1;
}

 

覆盖侧轴

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

li:nth-child(1){
    background-color: #bfa;
    align-self: flex-end;
}

 

标签:flex,主轴,元素,弹性,li,background,CSS
From: https://www.cnblogs.com/ximu1009/p/17927577.html

相关文章

  • CSS中的各种居中
    在CSS布局时经常会需要实现水平居中,垂直居中,水平垂直居中这样的要求但是却又不是非常的在意,所以总结一下。文本水平居中1.使用text-align属性:将容器的text-align属性设置为"center",可以使文本在容器中水平居中。<style>.container{width:500px;......
  • [CSS]border-image-slice宽高不确定时自定义边框
    宽高不确定时自定义边框效果: <!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0"><title>borde......
  • [CSS]动画,平移到某个位置,停住
    animation-fill-mode:forwards; <!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0"><......
  • css 盒模型
    说一下css盒模型参考回答:简介:就是用来装页面上的元素的矩形区域。CSS中的盒子模型包括IE盒子模型和标准的W3C盒子模型。box-sizing(有3个值哦):border-box,padding-box,content-box.标准盒子模型:区别:从图中我们可以看出,这两种盒子模型最主要的区别就是width......
  • HTML+CSS使用
    一、旋转太极图<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0"><title>旋转太极图</title>......
  • 一个炫酷的CSS动画
    先不说是啥,直接上代码,想看效果自己复制运行。<!DOCTYPEhtml><html><head><style>html{background:black;}.container{width:300px;height:300px;}.main1{width:500px;......
  • CSS object-fit
    一、object-fitobject-fit属性定义了被替换的元素(如img或video)的内容应如何调整大小以适应其容器。object-fit的默认值是fill,这可能导致图像被挤压或拉伸。让我们来看看可能的值。object-fit的可能值:contain、cover、fill、none1、object-fit:contain在这种情况下,图像的大......
  • 常用xpath选择器和css选择器总结
    xpath选择器表达式说明article选取所有article元素的所有子节点/article选取根元素articlearticle/a选取所有属于article的子元素的a元素//div选取所有div子元素(不论出现在文档任何地方)article//div选取所有属于article元素的后代的div元素,不管它出现在ar......
  • 03--css重点回顾
    CSS层叠样式表一css简介什么是css?层叠样式表命名规则:使用字母、数字或下划线和减号构成,不要以数字开头格式:选择器{属性:值;属性:值;属性:值;....}其中选择器也叫选择符CSS中注释/*...*/二如何使用css样式即html中嵌入css的方式1.内联方式(行内样式......
  • CSS设置一个梯形
    1、图形2、代码<!DOCTYPEhtml><html><head><metacharset="utf-8"><title></title><style> .d{ width:0px; height:100px; border-left:25pxsolid; border-top:25pxsolidtransparent; border-bottom:2......