📌  相关文章
📜  Flex-CSS样式(1)

📅  最后修改于: 2023-12-03 15:15:06.179000             🧑  作者: Mango

Flex-CSS样式介绍

什么是Flex-CSS样式？

Flexbox（伸缩盒子）布局是CSS3中新添加的布局方式之一。Flex-CSS样式是基于Flexbox布局的CSS框架。

相较于传统的CSS布局方式，Flexbox布局可以让我们更加轻松地实现响应式布局，尤其适用于移动端。

Flex-CSS样式则是在Flexbox布局的基础上进行了封装，使得开发者可以更加便捷地实现灵活、自适应的布局效果。

Flex-CSS的使用方法
引入Flex-CSS样式表

在HTML文件中的<head>标签中引入Flex-CSS样式表：

<link rel="stylesheet" href="flex.css">
布局容器和布局项目

使用Flex-CSS样式时需要将页面元素分为两种类型：布局容器（Container）和布局项目（Item）。

Container

<div class="container">
  ...<!--布局项目-->
</div>

Container属性：

  • display:flex 定义布局容器为Flex布局
  • flex-direction:row/column 定义主轴方向。默认为row
  • justify-content:flex-start/center/flex-end/space-around/space-between 定义主轴上的对齐方式。默认为flex-start
  • align-items:flex-start/center/flex-end/stretch/baseline 定义交叉轴上的对齐方式。默认为stretch
  • flex-wrap:wrap/wrap-reverse 定义是否折行。默认为nowrap
  • align-content:flex-start/center/flex-end/stretch/space-around/space-between 定义多行时的对齐方式。默认为stretch

Item

<div class="item">
  ...
</div>

Item属性：

  • flex-grow:n 定义项目放大比例，默认为0
  • flex-shrink:n 定义项目缩小比例，默认为1
  • flex-basis:n(px/%/auto) 定义项目在主轴方向上的初始大小，默认为auto
  • flex:none/auto/initial 定义项目是否伸缩或其默认值，默认为initial
  • align-self:flex-start/center/flex-end 定义项目自身在交叉轴上的对齐方式，默认为auto
实现Flex-CSS布局示例
布局容器的属性示例
<div class="container">
  <div class="item item-1">1</div>
  <div class="item item-2">2</div>
  <div class="item item-3">3</div>
  <div class="item item-4">4</div>
</div>

.container {
  display: flex; /*定义为Flex布局*/
  flex-direction: row; /*主轴方向为从左到右，row为默认值*/
  justify-content: center; /*居中对齐*/
  align-items: center; /*交叉轴上居中对齐*/
}
.item {
  flex: none; /*不伸缩*/
  width: 100px;
  height: 100px;
  background-color: #69ccea;
  font-size: 48px;
  color: #fff;
  text-align: center;  
}

示例1

布局项目的属性示例
<div class="container">
  <div class="item item-1">1</div>
  <div class="item item-2">2</div>
  <div class="item item-3">3</div>
</div>

.container {
  display: flex; /*定义为Flex布局*/
  flex-wrap: wrap; /*超过容器宽度自动换行*/
  justify-content: center; /*主轴上居中对齐*/
  align-items: center; /*交叉轴上居中对齐*/
}
.item {
  flex: none; /*不伸缩*/
  width: calc(33% - 20px); /*每行最多三个元素，计算占比（-20px为留白）*/
  margin: 10px; /*设置元素之间的间距*/
  height: 120px;
  background-color: #69ccea;
  font-size: 48px;
  color: #fff;
  text-align: center;  
}

示例2