CSS入门---初识弹性布局

最新推荐文章于 2023-06-16 14:25:52 发布
最新推荐文章于 2023-06-16 14:25:52 发布
阅读量462 收藏
点赞数
分类专栏： CSS 文章标签： css html flex
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_44433209/article/details/114674687
版权

CSS入门—弹性布局

此节内容包括：

 1. 改变弹性元素方向
 2. 控制弹性元素溢出的换行处理

一、首先声明一个弹性盒模型

<!DOCTYPE html>
<html lang="en">
<head>`在这里插入代码片`
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="
最低0.47元/天 解锁文章
落日伏羲
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Flex布局详解
segegefe的博客
03-03 2094
Flex 布局详解 一、入门 1. flex 是什么？ flex 是 Flexible Box 的缩写，就是弹性盒子布局的意思 2. 为什么我们需要 flex 解决元素居中问题 自动弹性伸缩，合适适配不同大小的屏幕，和移动端 3.flex 常见术语 三个2 序号 简记 术语 1 二成员 容器和项目(container / item) 2 二根轴 主轴与交叉轴(main-axis / cross-axis) 3 二根线 起始线(main/cross-start)与结束线（main/cross-
flex 布局介绍和常用的属性
shijialeya
12-17 3843
flex 布局介绍 flex 是 Flexble Box 的简写，翻译为：弹性布局。这种方式给盒子布局带来了很大的灵活性。 使用这种布局需要先给父标签属性添加 display: flex; 。此时父标签就称为容器，而子标签就称为项目。 父标签指定 flex 布局之后，子标签的 float、clear、vertical-align 属性都会失效，并且子标签的行内元素可以直接设置宽高。 学习 flex 布局之前必须要理清主轴和测轴，主轴默认方向是水平向右，侧轴方向是垂直向下，如下图： 因为主轴和侧轴方向总是保
CSS常用属性（二）
daimenglaoshi的博客
09-02 296
在li中添加span等标签 设置背景图片Css代码Display块标签，独立占一行行内块标签，不换行 但可以设置宽高内联标签，不换行 不能设置宽高不显示盒子模型边框设置边框border:10pxsolidred;/*边框*/也可以设置top,bottom,left,right边框border-top:2pxsolidgreen;也可以设置圆角边框：:0px;:30px;:30px;
移动端布局的常用属性
m0_37368153的博客
03-19 165
移动端布局的常用属性 /* 属性： flex-direction 决定主轴的方向，即项目排列的方向，有四个可能的值：row(默认)|row-reverse|column|column-reverse 属性值： 1、row:主轴为水平方向，项目沿主轴从左至右排列 (默认值) 2、column：主轴为竖直方向，项目沿主轴从上至下排列 3、row-reverse：主轴水平，项目从右至左排列，与row反向...
flex
Bliss_妍的博客
08-19 275
flex布局则是通过为修改父div的display属性，让父元素成为一个flex容器，从而可以自由的操作容器中子元素(项目)的排列方式。 例如我们让多个div横向排列，传统做法是使用浮动，但浮空后因为脱离文档流的缘故，父元素会失去高度，这又涉及了清除浮动等一系列的问题。 而flex布局相对简单很多，修改父元素display:flex，你会发现div自动就排列成了一行，而且没有浮动之后的副作用，从回流角度考虑，flex的性能更优于float flex布局属性主要由容器属性和项目属性构成 容器属性: 1.f
浅谈css sticker-footer 布局
09-24
本篇文章主要介绍了css sticker-footer 布局，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
1.09 css3-布局
最新发布
10-07
1.09 css3-布局
css-loader：CSS加载器
02-05
入门首先，您需要安装css-loader ： npm install --save-dev css-loader 然后将插件添加到您的webpack配置中。 例如： file.js import css from "file.css" ; webpack.config.js module . exports = { module : { ...
css-pro-layout：CSS库，用于构建响应式和可自定义的布局
02-03
CSS Pro布局 CSS库，用于构建响应式和可自定义的...import 'css-pro-layout/dist/css/css-pro-layout.css' ; CDN 您也可以使用的CDN链接 < link href =" https://unpkg.com/css-pro-layout/dist/css/css-pro-layout
Day06-CSS布局-浮动
07-10
Day06-CSS布局-浮动
弹性盒子（display: flex）布局超全讲解|Flex 布局教程
热门推荐
肥晨开发的学习之路
06-16 10万+
弹性布局（Flex布局）是一种现代的CSS布局方式，通过使用display: flex属性来创建一个弹性容器，并在其中使用灵活的盒子模型来进行元素的排列和定位。
盘点flex布局常见属性及适用场景
m0_67805754的博客
04-24 2053
flex布局原理:就是通过给父盒子添加flex属性,来控制子盒子的位置和排列方式 下面介绍下flex常用的属性:flex-direction,flex-wrap,justify-content 1.flex-direction决定主轴的排列方向:row(默认值)|row-reverse|column|column-reverse,示意图如下: (1)row(默认值):主轴为水平方向,自左至右 (2)row-reverse:主轴为水平方向,自右至左 (3)column:主轴为垂直方向,自上而下 (
CSS day06
zbw970802的博客
09-18 163
一、复杂选择器   1.结构伪类选择器     1.:only-child       匹配的元素是属于父元素中的唯一子元素。     2.否定伪类       将满足指定选择器的元素给排除在外。       语法：  :not(selector){...}     3.伪元素选择器       1.::first-letter或:first-letter         作用：用于匹配元素的首字...
css flex布局 —— 容器属性 flex-direction
且听风吟的博客
09-23 1218
每天总结学习一个小知识 —— 容器属性 flex-direction
flex布局详解
程序员小明1024
12-20 5967
.markdown-body { line-height: 1.75; font-weight: 400; font-size: 16px; overflow-x: hidden; color: rgba(37, 41, 51, 1) } .markdown-body h1, .markdown-body h2, .markdown-body h3, .markdown-body h4, .ma...
Flex布局
feiyu361的博客
11-28 283
flex布局父项常见属性： flex-direction: 设置主轴方向，先设置谁为主轴，剩下的就是侧轴（主轴水平X轴，侧轴纵向Y轴） justify-content: 设置主轴上的子元素排列方式 flex-wrap: 设置子元素是否换行 align-content: 设置侧轴上子元素的排列方式（多行） align-items: 设置侧轴上的子元素排列方式（单行） flex-flow: 合属性，相当于同时设置了flex-direction 和 flex-wrap 一 共同的css
【无标题】
qq_52772066的博客
08-01 133
CSS两种布局结构
flex-direction容器属性
巧克力很苦的小博客
05-02 1万+
flex-direction容器属性 flex-direction属性决定主轴的方向（即项目的排列方向）。 .container { flex-direction: row | row-reverse | column | column-reverse; } 这将建立主轴，从而定义Flex项目放置在Flex容器中的方向。Flexbox（除了可选包装）是单向布局概念。将flex项目视为主要布...
css --w --h
07-27
CSS中的`--w`和`--h`不是真正的CSS属性，而是自定义属性（custom properties）或者叫做CSS变量（CSS variables）。它们是用来存储和重用值的。 在CSS中，我们可以使用`--`前缀来定义自定义属性。例如，你可以这样...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值