CSS 弹性布局 flex 二

最新推荐文章于 2022-10-18 23:07:14 发布
最新推荐文章于 2022-10-18 23:07:14 发布
阅读量119 收藏
点赞数
分类专栏： CSS 文章标签： css html html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/W_SJ_SY/article/details/120738654
版权

居中等分 justify-content:center;
居中对齐(项目 itmes) align-items:center;
布局方向(方向 direction; 行 row; 列 lcoumn) flex-direction:lcoumn;

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>Title</title>
    <meta name="Keywords" content="关键字">
    <meta name="description" content="简介">
    <!-- 居中等分justify-content:center;
        居中对齐(项目items) align-items:center;
        布局方向(方向 direction; 行 row; 列 column) flex-direction:column;
     -->
</head>
<body>
<style>
    .box {
        display: flex;
        width: 100%;
        height: 500px;
        background-color: pink;
        /*居中等分 space-around*/
        /*justify-content: space-around;*/
        justify-content: center;
        /*居中对齐 项目(items)*/
        align-items: center;
        /*布局方向(方向 direction;行 row;列 column) flex-direction:row*/
        /*flex-direction: row;*/
    }

    .box span {
        /*flex: 1;*/
        width: 200px;
        height: 150px;
        margin: 5px;
    }
</style>
<div class="box">
    <!-- 对齐 align;自己 self; -->
    <span style="align-self:flex-start;background-color: aqua">11</span>
    <span style="background-color: green">22</span>
    <span style="background-color: lightgreen">44</span>
    <span style="align-self:flex-end;background-color: deepskyblue">33</span>
</div>
</body>
</html>
卋舉
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
css弹性盒子二
weixin_73143398的博客
09-12 2744
以下简单的布局需求是难以或不可能用这样的工具方便且灵活的实现的：在父内容里面垂直居中一个块内容。使容器的所有子项占用等量的可用宽度/高度，而不管有多少宽度/高度可用。使多列布局中的所有列采用相同的高度，即使它们包含的内容量不同。这些弹性盒子都可以实现。。。我草指定元素的布局为弹性盒子首先，我们需要给父元素设置display：flexdiv {}
css之Flex布局(二)
CruellyJohn的博客
08-09 2284
flex布局之flex-item的属性 前言：这里的flex-item的属性是指Flex容器中项目div的属性 继上篇讲了flex布局的容器的六大css属性，这次来说说容器中的项目（flex-item）的六大css属性 order flex-grow flex-shrink flex-basis flex align-self 在下面的代码实例中，为了更直观的看属性的解析。不会...
css flex: 2;,CSS 布局_2 Flex弹性盒
weixin_39524834的博客
08-03 985
Unsplash弹性盒，是一种布局方式，当页面需要适应不同的屏幕大小以及设备类型时，它依然能确保元素拥有更恰当的排布行为，从定义方面来说，弹性布局是指通过调整其内元素的宽高，从而在任何显示设备上实现对可用显示空间最佳填充的能力，弹性容器扩展其内元素来填充可用空间，或将其收缩来避免溢出块级布局更侧重于垂直方向、行内布局更侧重于水平方向，与此相对的，弹性盒布局算法是与方向无关的0 弹性盒布局介绍弹性盒...
CSS之Flex 布局：语法篇
weixin_30466039的博客
12-26 258
网页布局（layout）是 CSS 的一个重点应用。 ​ 布局的传统解决方案，基于盒状模型，依赖display属性 +position属性 +float属性。它对于那些特殊布局非常不方便，比如，垂直居中就不容易实现。 ​ 2009年，W3C 提出了一种新的方案----Flex 布局，可以简便、完整、响应式地实现各种页面布局。目前，它已经得到了所有浏览器的支持，这意味着，现在就能很安...
二、flex弹性布局
hikankan的博客
02-26 419
flex弹性布局
CSS：2、flex布局
weixin_36020178的博客
07-05 110
CSS：2、flex布局简介 简介 display:flex;：用于控制子元素的排列； flex-direction：确定flex的方向，是横向还是纵向； align-items：子元素水平方向对其方式； align-self：自己水平方向对其方式； justify-content：垂直方向怎么对齐，需要设置元素的高度； ...
CSS - flex
小蚂蚁的世界
06-24 1339
CSS2.1定义了四种布局方式，由一个盒与其兄弟，祖先盒的关系决定其尺寸与位置的算法。块布局：呈现文档的布局模式。行内布局：呈现文本的布局模式。表格布局：用表格呈现2D数据的布局模式。定位布局：能够直接地定位元素的布局模式，定位元素奴基本与其他元素没有任何关系。CSS3引入的flex布局，主要思想是让容器有能力控制子项目的高度，宽度（设置顺序）。以最佳方式填充可用空间（主要是为了适应所有类型的显示...
CSS：flex布局
u013938578的博客
02-22 450
1.基本概念 Flex 是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。 在 flex 容器中默认存在两条轴，水平主轴(main axis) 和垂直的交叉轴(cross axis)，这是默认的设置，当然你可以通过修改使垂直方向变为主轴，水平方向变为交叉轴，这个我们后面再说。 在容器中的每个单元块被称之为 flex item，每个项目占据的主轴空间为 (main size), 占据的交叉轴的空间为 (cross size)。 这里需要强调，不能先入为主认为宽度就
CSS初入门：flex布局
lalala_dxf的博客
03-21 6610
flex布局 简介 Flex 是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。布局的传统解决方案，基于盒模型，依赖 display 属性 + position属性 + float属性。它对于那些特殊布局非常不方便，比如，垂直居中就不容易实现。而Flex 布局，可以简便、完整、响应式地实现各种页面布局。目前，它已经得到了所有浏览器的支持。任何一个容器都可以指定为 Flex 布局。 关于flex弹性盒模型 采用 Flex 布局的元素，称为 Flex 容器（flex con
CSS通用样式2——Flex布局
最新发布
qq_66198247的博客
10-18 2761
使用display通用类d-flex或类创建一个flexbox容器，并将子元素转换为flex属性。其中，d-flex类设置对象为弹性伸缩盒子，d-inline-flex类设置对象为内联块级弹性伸缩盒子。Flex是Flexible Box的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。采用Flex布局的元素，称为Flex容器( flexcontainer)，简称"容器"。
CSS day12 移动端布局练习
qq_34620296的博客
09-13 733
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-U...
CSS flex属性
manba
05-10 883
布局尽量避免使用 float，改用 flex 布局，这里是 布局时 不同个数的具体意义详情 /* Keyword values */ flex: auto; flex: initial; flex: none; /* One value, unitless number: flex-grow */ flex: 2; /* One value, width/height: flex-basis ...
CSS的flex布局看完这篇你就懂了
热门推荐
Allenyhy的博客
08-12 4万+
我们之前已经学过一些布局模型，比如说浮动，绝对定位等等，但是这些布局方式一是不够简洁，而是使用的范围确实是太窄了。 flex模型拥有比较多的属性，来设置多样的布局方式，接下来我们就详细介绍各种属性对布局的改变，最后再对属性做一个汇总 先看一下flex的基本模型，如下图所示： container父容器里有三个子元素flex-item。当给父容器设置display:flex;直接子元素就有布...
css --- > 使用flex写一个常见的两列布局
栗子好好吃的博客
06-26 8626
flex-grow: <style> .content { display: flex; } .aside.left { width:200px; border:3px solid black } .aside.main0 { flex-grow: 0; border...
CSS3中不熟悉的属性2：display:box和display:flex的区别
juzipchy的博客
06-06 2293
display:box和display:flex有什么区别吗？没区别，仅是各阶段草案命名。 W3C 2009年第1次草案：display:box; W3C 2011年第2次草案：display:flexbox | inline-flexbox;- W3C 2012年第5次草案及以后的候选推荐标准：display:flex | inline-flex;因此display:box和display
css3中的flex的用法详解
王项雨 的博客
05-23 4082
flex是css3中一个非常重要的属性，在布局中使用flex起到很重要的作用。例如： 1.我们想让一个子div居中用一个flex就完全搞定。 2.就是我们想让我们的布局 不管是水平布局还是垂直布局 让子元素 按比例设置宽或者高，起到异想不到作用，很方便。下面就具体介绍一下他有哪些属性和用法： 1》如果我们想使用flex，首先需要在父容器中设置： display: flex;  --
css中的flex（弹性）布局
domunweb的博客
07-08 3万+
flex 弹性布局 一. flex 解释 1、flex 布局 为 flexible BOX 的缩写 ，意思为 弹性布局。 2、块级元素和行内块级元素都可以使用flex布局 3、Webkit内核的浏览器，需要加上-webkit前缀。 二. flex 容器 属性 1、flex-direction 此属性决定主轴的方向 .flex{ flex-direction: row; // (默认值) 主轴水平...
flex的使用实例
weixin_30348519的博客
01-13 1477
之前的随笔从阮一峰老师那里学到了flex的基本用法及作用，现在来把flex具体运用到实例中，看看flex的弹性布局效果。 1. flex设置元素垂直居中对齐 在之前的一篇文章中记载过如何垂直居中对齐，方法有很多，但是在学习了flex布局之后，垂直居中更加容易实现 HTML代码： <div class="demo"> <div class="inner...
Flex弹性盒布局2
karry_yuan的博客
04-13 207
Flex弹性盒布局2
CSS3弹性布局详解：flex使用指南
"CSS3新增布局之: flex详解" 在CSS3中，flex布局是一种强大的工具，用于创建响应式和动态的网页布局。它允许开发者更灵活地控制元素的排列、大小和顺序，尤其是在不同屏幕尺寸下。这个布局模式是通过`display`属性...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值