flex布局中的align-items:stretch属性

2023-10-17 23:30

本文主要是介绍flex布局中的align-items:stretch属性,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

align-items:stretch

align-items:stretch是一个默认值,永远保持在侧轴拉伸项目,怎么理解这句话呢?

  • 如果侧轴是垂直方向,那么在垂直方向如果项目没有设置高度,则会拉伸至弹性父级盒子的高度,

  • 如果侧轴为水平方向,如果项目没有设置宽度,那么就会拉伸其宽度至父级弹性盒子的宽度一致。

  • 这里用一个布局例子详细解释这个属性
    我们想实现类似于这个效果,基本的布局思路是,给一个白色的大盒子弹性布局,设置主轴方向为column,然后让其两端对其,然后再让两个盒子设置为弹性盒子,两边对齐
    css样式思路:

  • 给定大盒子宽度和高度,以及padding值

  • 给两个小边框的盒子设置高度,因为是标准流,所以继承大盒子的宽度

  • 给边框小盒子设置flex,两端对其
    骰子在这里插入图片描述

  • 在两个小盒子设置了flex,并且设置两端对其,大盒子为设置flex之前,我们看到的是这个样子
    在这里插入图片描述

  • 在盒子设置了flex之后,我们看到的是这样的—stretch为我们拉伸了高度
    在这里插入图片描述

  • 给大盒子更该了主轴之后,我们看到的是这个样子的
    在这里插入图片描述
    总结:总之一句话,弹性盒子侧轴为水平,如果其项目没有宽度,则会拉伸至弹性盒子一样的宽,如果侧轴为垂直,如果其项目没有高度,则会拉伸至弹性弹性盒子一样高

这篇关于flex布局中的align-items:stretch属性的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!


原文地址:https://blog.csdn.net/weixin_46663461/article/details/107830288
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.chinasem.cn/article/228673

相关文章

python删除xml中的w:ascii属性的步骤

《python删除xml中的w:ascii属性的步骤》使用xml.etree.ElementTree删除WordXML中w:ascii属性,需注册命名空间并定位rFonts元素,通过del操作删除属... 可以使用python的XML.etree.ElementTree模块通过以下步骤删除XML中的w:as

Python打印对象所有属性和值的方法小结

《Python打印对象所有属性和值的方法小结》在Python开发过程中,调试代码时经常需要查看对象的当前状态,也就是对象的所有属性和对应的值,然而,Python并没有像PHP的print_r那样直接提... 目录python中打印对象所有属性和值的方法实现步骤1. 使用vars()和pprint()2. 使

CSS place-items: center解析与用法详解

《CSSplace-items:center解析与用法详解》place-items:center;是一个强大的CSS简写属性,用于同时控制网格(Grid)和弹性盒(Flexbox)... place-items: center; 是一个强大的 css 简写属性,用于同时控制 网格(Grid) 和 弹性盒(F

CSS3中的字体及相关属性详解

《CSS3中的字体及相关属性详解》:本文主要介绍了CSS3中的字体及相关属性,详细内容请阅读本文,希望能对你有所帮助... 字体网页字体的三个来源:用户机器上安装的字体,放心使用。保存在第三方网站上的字体,例如Typekit和Google,可以link标签链接到你的页面上。保存在你自己Web服务器上的字

SpringBoot读取ZooKeeper(ZK)属性的方法实现

《SpringBoot读取ZooKeeper(ZK)属性的方法实现》本文主要介绍了SpringBoot读取ZooKeeper(ZK)属性的方法实现,强调使用@ConfigurationProperti... 目录1. 在配置文件中定义 ZK 属性application.propertiesapplicati

Java反射实现多属性去重与分组功能

《Java反射实现多属性去重与分组功能》在Java开发中,​​List是一种非常常用的数据结构,通常我们会遇到这样的问题:如何处理​​List​​​中的相同字段?无论是去重还是分组,合理的操作可以提高... 目录一、开发环境与基础组件准备1.环境配置:2. 代码结构说明:二、基础反射工具:BeanUtils

MySQL 事务的概念及ACID属性和使用详解

《MySQL事务的概念及ACID属性和使用详解》MySQL通过多线程实现存储工作,因此在并发访问场景中,事务确保了数据操作的一致性和可靠性,下面通过本文给大家介绍MySQL事务的概念及ACID属性和... 目录一、什么是事务二、事务的属性及使用2.1 事务的 ACID 属性2.2 为什么存在事务2.3 事务

Spring Cache注解@Cacheable的九个属性详解

《SpringCache注解@Cacheable的九个属性详解》在@Cacheable注解的使用中,共有9个属性供我们来使用,这9个属性分别是:value、cacheNames、key、key... 目录1.value/cacheNames 属性2.key属性3.keyGeneratjavascriptor

Spring Boot 事务详解(事务传播行为、事务属性)

《SpringBoot事务详解(事务传播行为、事务属性)》SpringBoot提供了强大的事务管理功能,通过@Transactional注解可以方便地配置事务的传播行为和属性,本文将详细介绍Spr... 目录Spring Boot 事务详解引言声明式事务管理示例编程式事务管理示例事务传播行为1. REQUI

CSS3 布局样式及其应用举例

《CSS3布局样式及其应用举例》CSS3的布局特性为前端开发者提供了无限可能,无论是Flexbox的一维布局还是Grid的二维布局,它们都能够帮助开发者以更清晰、简洁的方式实现复杂的网页布局,本文给... 目录深入探讨 css3 布局样式及其应用引言一、CSS布局的历史与发展1.1 早期布局的局限性1.2