flexbox父盒子align-items属性

最新推荐文章于 2022-02-13 11:57:57 发布
最新推荐文章于 2022-02-13 11:57:57 发布
阅读量112 收藏
点赞数 
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
  .flex-container {
    display: flex;
    /*整体上对齐*/
    /*align-items: flex-start;*/
    
    /*整体垂直居中*/
    /*align-items: center;*/

    /*整体下对齐*/
    /*align-items: flex-end;*/
    
    /*默认值：当子盒子没有设置高度时，子盒子高度拉伸至和父盒子同高*/
    /*align-items: stretch;*/
    
    /*当文字大小不一时，子盒子以较大文字的基线对齐，不常用*/
    align-items: baseline;
    width: 400px;
    height: 400px;
    background-color: gray;
  }

  .flex-item {
    background-color: green;
    width: 100px;
    height: 100px;
    margin: 5px;
  }
  .flex-item:nth-child(1) {
    font-size: 20px;
  }

  .flex-item:nth-child(2) {
    font-size: 30px;
  }
  </style>
</head>

<body>
  <div class="flex-container">
    <div class="flex-item">flex item 1</div>
    <div class="flex-item">flex item 2</div>
    <div class="flex-item">flex item 3</div>
  </div>
</body>

</html>

1027889-20170730200025537-221712960.png

weixin_33933118
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
CSS3 Flexbox中flex-shrink属性的用法示例介绍
01-19
在CSS3 Flexbox中flex-shrink属性定义为: This <number> component sets ‘flex-shrink’ longhand and specifies the flex shrink factor, which determines how much the flex item will shrink relative to the ...
lab-2-flexbox-cwilso01-su：GitHub Classroom创建的lab-2-flexbox-cwilso01-su
02-22
Lab2-入门版
解决align-items失效，无法居中问题
angula
08-29 1万+
在做flex布局的时候，有时候你可能会遇到align-items失效的问题，那么下面来说一下 css #main{ display: flex; justify-content: center; align-items: center; } #content{ width: 100px; height: 100px; background-color: #1890FF; } 此时align-items失效，只能水平居中，.
Flex布局常见父项属性（三）- align-items, align-content和flex-flow
JHY97的博客
01-06 2万+
1.align-items用于设置侧轴上的子元素排列方式（单行） 该属性用于控制子元素在侧轴（默认为y轴）上的排列方式，在子元素为单项时使用 1.1属性值 属性值 说明 flex-start 从上到下；默认值 flex-end 从下到上 center 垂直居中 stretch 拉伸 1.2案例 1.设置align-items属性值：center 为了能够更好区别，先设置主轴（x轴）居中，再设置侧轴（y轴）居中 /* 父级
flex布局中的 align-items 与 align-content
polar_night_down的博客
02-13 1万+
定义 align-items : 属性定义flex子项在flex容器的当前行的侧轴（纵轴）方向上的对齐方式。 center：元素位于容器的中心。 弹性盒子元素在该行的侧轴（纵轴）上居中放置。（如果该行的尺寸小于弹性盒子元素的尺寸，则会向两个方向溢出相同的长度）。 align-items:center align-content：会设置自由盒内部所有行作为一个整体在垂直方向排列方式。针对多行作为一个整体在纵轴上的排列方式，该属性对单行无效。 center：元素位于容器的中心。 各行向弹性盒容器的中间位置
关于align-items和align-content的区别和使用场景
weixin_30314631的博客
12-14 1778
　　最近在研究flex布局，容器中有两个属性，是用来定义crossAxis测轴排列方式的。一开始接触align-items还可以理解感觉不难,后来看到align-content就感觉有点混淆了，特开一篇博客记录一下我的学习过程。先来看看两个属性的基本用法和定义，这里摘抄于萤火虫塔莉上的回答。 align-items The align-items property applies to a...
flexbox父盒子flex-wrap属性
极客神殿
11-08 596
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> .flex-container { display: flex; /*默认值：当一行放不下是...
x-flexbox：提供Flexbox功能的Web组件
02-06
x-flexbox 提供Flexbox功能的Web组件。 安装 使用 ： $ npm install x-flexbox 用法 导入FlexContainer和FlexItem ，进行注册。 < script type =" module " > import { FlexContainer , FlexItem } from '...
flexbox-cheat-site:Flexbox属性列表
03-08
flexbox作弊网站 Flexbox属性的列表包括： 显示示例代码 链接到MDN文档 代码段 执照 版权所有（c）2020 kuroppe1819 根据许可证获得许可。
flex 伸缩盒子，使用范例（子元素在侧轴对齐方式align-items；单个元素，在侧轴对齐方式align-self）
xqiitan的专栏
03-13 1463
根据服务器返回条目，N个菜单平分标题栏宽度。 &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;title&gt;flex：伸缩菜单&lt;/title&gt; &lt;style&gt; * { margin: 0; padd
Vue项目 关于flex布局（详解）
Jiang_bug的博客
03-31 8700
Flet布局 语法（Flex 指定容器 —父元素） 首先我们需要一个总盒 注意：设为 Flex 布局以后，子元素的float、clear和vertical-align属性将失效。 <template> <div class="box"> <div class="item"></div> </div> </template> <style scoped> .box{ // 将box指定为Flex
解决 flex align-items：center 无法居中（微信小程序）
weixin_30740581的博客
07-21 919
因为最近再做小程序，需要用到flex布局，因为写惯了web项目，初次学习确实感弹性布局的强大（关键是不用再管可恶的ie了）。 但是也遇到了align-items：center无法居中的问题，想了很久终于找到了解决办法。 解决方法： 　　1.确定好自己的主轴方向是不是row，如果是column，那么恭喜你，align-items:center是不起效果的，这时候你可以试试justify-con...
vue flex 布局实现div均分自动换行
热门推荐
诗雨远方的博客
01-08 3万+
                                   vue flex 布局实现div均分自动换行     许久没有更新了，今天才意外发现以前还是没有看懂盒模型，今天才算看懂了，首先我们今天来看一下想要实现的效果是什么?当然适配是必须的，1920 或者 1376都测试过。效果如图所选中区域所示：  一、关于flex布局我建议去看一下http://www.ruanyifeng...
nvue爬坑总结
panerapan的博客
07-22 3519
nvue爬坑总结 最近公司项目要做直播，使用了uniapp里面的live-pusher和live-player标签，但live-pusher标签在app是不支持的，除非在nvue页面里面使用，拉流直接使用video标签播放，以下是我的nvue爬坑总结： 文本内容自动宽度 给父级盒子增加align-items: center，这样既能一行显示，又可以自动文本宽度 文本内容一行超出省略号显示 text-overflow: ellipsis; lines:1; 文本内容一行超出换行 min-heig
小程序中让后面的View覆盖到上一个view中
暗透了更能看到星光
08-03 2万+
第二个板块有一部分覆盖在第一个板块上 直接在第一个板块的wxss文件中加上： z-index: -1; 备注：z-index的值越大优先级越高，但是需要注意的是需要设置position才有效果...
vux flexbox使用_3种现代工具如何使用Flexbox网格
culi3118的博客
08-14 551
vux flexbox使用There are plenty of valuable resources (articles, tutorials, and online tools) discussing the flexbox layout module. Flexbox has gained so much traction that more and more grids and frame...
布局神器---flexbox
王欢的博客
04-07 2022
1.flexboxflexbox： 是css3中的新的布局模式，可以控制未知容器元素的对齐方式、排列方向、排列顺序。 flex布局：（由父元素和它的直接子元素组成） 父元素：成为flex容器 直接子元素：成为flex项目/flex item2.flex容器的属性： 设置display:flex;/display:inline-flex; 设置flex容器的
iphone 6的兼容问题
宠辱不惊，看庭前花开花落；去留无意，望天上云卷云舒
03-20 543
Flex display: flex → display: -webkit-flex justify-content: space-between; → -webkit-justify-content: space-between align-items: center; → -webkit-align-items: center flex-direction: co...
小程序在 iphone6中的flex布局 兼容性
平凡之路
05-10 3120
项目上线后，被体验用户截图了。样式完全爆炸。 我当时也差点原地爆炸了。因为在测试开发阶段，没有看到这样的情况出现。一时间有点慌张，哈哈哈哈，其实 还好。 仔细发现，就会察觉到是flex布局的兼容性问题了，在日常开发中，我似乎没有养成这样需要display:-webkit-flex；这样多书写一行代码的习惯，因为觉得现在大多数人的手机不应该那么老。现在开来，做开发还是需要多照顾那些在201...
js-Flexbox盒子布局
最新发布
05-24
在父容器中，我们还可以设置子元素的对齐方式，这可以通过设置justify-content和align-items两个属性来实现，例如： ``` .container { display: flex; flex-direction: row; justify-content: center; align-...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值