0
点赞
收藏
分享

微信扫一扫

docker - window Docker Desktop升级

7dcac6528821 2023-10-28 阅读 19
css前端

  

 🎬 江城开朗的豌豆:个人主页

 🔥 个人专栏 :《 VUE 》 《 javaScript 》

 📝 个人网站 :《 江城开朗的豌豆🫛 》 

⛺️ 生活的理想,就是为了理想的生活 !

在这里插入图片描述

目录

 ⭐  专栏简介

 📘  文章引言

基本概念

基本属性

⭐  写在最后


 ⭐  专栏简介

 📘  文章引言

CSS Flexbox(弹性盒子)是一种现代的布局模式,它提供了一种更加灵活和高效的方式来对页面元素进行布局。本文将详细介绍CSS Flexbox的基本概念、属性和用法。

基本概念

Flexbox 是一种新的 CSS 布局模式,它可以轻松地实现各种复杂的布局。与传统的布局方式(如浮动、定位等)相比,Flexbox 具有更高的灵活性和性能。

Flexbox 的核心思想是将容器划分为多个项目(item),这些项目可以在容器中自由地调整大小和位置。通过设置容器和项目的样式属性,可以实现各种复杂的布局效果。

基本属性

以下是 Flexbox 的一些基本属性:

  •  display: 用于将一个容器定义为弹性盒子容器。默认值为 inline-flex,也可以设置为 flex

.container { display: flex; }

  • flex-direction: 用于设置项目的排列方向。可选值有 row(默认值,水平排列)、row-reverse (水平排列,反向)、column(垂直排列)和 column-reverse(垂直排列,反向)。

.container { flex-direction: row; }

  1. flex-wrap: 用于设置项目是否换行。可选值有 nowrap(默认值,不换行)、wrap(换行)和 wrap-reverse(换行,反向)。

.container { flex-wrap: wrap; }

  • justify-content: 用于设置项目在主轴上的对齐方式。可选值有 flex-start(默认值, 起始位置对齐)、flex-end(结束位置对齐)、center(居中对齐)、space-between(两端对齐,项目之间的间隔相等)和 space-around(平均分布,项目之间的间隔相等)。

.container { justify-content: center; }

  •  align-items: 用于设置项目在交叉轴上的对齐方式。可选值有 stretch(默认值,拉伸以填充交叉轴)、flex-start(起始位置对齐)、flex-end(结束位置对齐)、center(居中对齐)和 baseline(基线对齐)。

.container { align-items: center; }

  • align-content: 用于设置多行项目在交叉轴上的对齐方式。可选值有 stretch(默认值,拉伸以填充交叉轴)、flex-start(起始位置对齐)、flex-end(结束位置对齐 )、center(居中对齐)、space-between(两端对齐,项目之间的间隔相等)和 space-around(平均分布,项目之间的间隔相等)。

.container { align-content: space-between; }

  •  flex-growflex-shrinkflex-basis: 这三个属性用于控制项目的尺寸。其中,flex-grow 定义了项目的放大比例,flex-shrink 定义了项目的缩小比例,flex-basis 定义了项目的初始尺寸。默认情况下,所有项目的 flex-growflex-shrink 和 flex-basis 都为 0 1 auto

.item { 
flex-grow: 1; 
/* 放大比例 */ 
flex-shrink: 1; 
/* 缩小比例 */ 
flex-basis: auto; 
/* 初始尺寸 */
 }

  • order : 用于改变项目的排列顺序。数值越小,排列越靠前。默认值为 0

.item { order: -1; /* 排在最后 */ }

⭐  写在最后

举报

相关推荐

0 条评论