Introduction to flex box in css-CSS Tutorial-php.cn

Home

Web Front-end

CSS Tutorial

Introduction to flex box in css

一个新手

Sep 09, 2017 am 09:20 AM

cssflex

Today we will mainly introduce the flexible box from its several attributes

display: flex；把元素设置成弹性容器

1.flex-direction:可以改变flex容器的方向让其子元素来弹性布局
row定义主轴方向为X轴从左到右
row-reverse 从右到左
column 定义主轴方向为Y轴从上到下

2.justify-content排列方式，让其子元素按不同方式进行排列
flex-start: 从行首开始排列。
flex-end: 从行尾开始排列
center: 元素向每行中点排列。
space-between : 在每行上均匀分配弹性元素。相邻元素间距离相同。每行第一个元素与行首对齐，每行最后一个元素与行尾对齐。
space-around:在每行上均匀分配弹性元素。相邻元素间距离相同。每行第一个元素到行首的距离和每行最后一个元素到行尾的距离将会是相邻元素之间距离的一半。

3.flex-wrap用来设置换不换行
nowrap:flex 的元素被摆放到到一行
wrap: flex 元素大于整个父级整个元素时就会另起一行进行排列
wrap-reverse :和 wrap 的行为一样,但会与原来的方向相反
4.align-items:弹性盒子的对齐方式

baseline sets the text to it. The picture below shows the set baseline

The above is the detailed content of Introduction to flex box in css. For more information, please follow other related articles on the PHP Chinese website!

Statement

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

css与xml的区别是什么Apr 24, 2022 am 11:21 AM

区别是：css是层叠样式表单，是将样式信息与网页内容分离的一种标记语言，主要用来设计网页的样式，还可以对网页各元素进行格式化；xml是可扩展标记语言，是一种数据存储语言，用于使用简单的标记描述数据，将文档分成许多部件并对这些部件加以标识。

常用的Flex布局属性有哪些Feb 25, 2024 am 10:42 AM

flex布局的常用属性有哪些，需要具体代码示例Flex布局是一种用于设计响应式网页布局的强大工具。它通过使用一组灵活的属性，可以轻松控制网页中元素的排列方式和尺寸。在本文中，我将介绍Flex布局的常用属性，并提供具体的代码示例。display：设置元素的显示方式为Flex。.container{display:flex;}flex-directi