flex布局自动换行并解决最后一行对齐

flex 布局:一行固定个数,超出换行(流式布局) flex 布局:实现一行固定个数,超出强制换行 阅读详情

flex布局自动换行并解决最后一行对齐

实现效果:
在这里插入图片描述

html代码(父级容器里面有5个子级盒子)
在这里插入图片描述

css实现对齐效果:

.flex-wrp {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  padding: 0 16rpx;
  box-sizing: border-box;
}
/* 实现最后一行对齐 */
.flex-wrp:after{
  content: "";
  width: 180rpx;
  height: 0;
  visibility: hidden;
}
.flex-item {
  display: flex;
  flex-direction: column;
  width: 180rpx;
  height: 180rpx;
  margin-bottom: 30rpx;
  overflow: hidden;
  padding-top: 30rpx;
  text-align: center;
  box-sizing: border-box;
  border-radius: 25rpx;
  border: 1px solid #eee;
  /* box-shadow: 0px 6px 10px rgb(54, 168, 255, 0.16); */
}

划重点:

1.flex-wrp:after样式的宽度和子级盒子的宽度一致
2.在最后一行添加了一个伪类子级盒子并隐藏掉,使得九宫格盒子保持对齐

Flex布局实战:如何优雅实现一行四列自动换行效果 本文详细解析了如何使用Flex布局优雅实现一行四列自动换行效果。通过核心属性flex-wrap与flex-basis的配合,结合box-sizing、gap属性及响应式媒体查询,解决了传统浮动布局的痛点,并提供了处理间距、对齐及动态内容等实战优化方案,助力开发者构建灵活稳健的网格系统。 阅读详情

相关推荐

微信小程序自定义日历组件及flex布局最后一行对齐问题分析

最近为我开源的小项目:微信小程序扩展自定义组件库(点击去GitHub) 增加了一个新组件 —— 日历组件。 在编写过程中,因为大家都知道,日历组件是有固定行数和每一行的固定列数的(即使当前方块内没有值),所以结合小程序“数据优先”的特点,最合适的布局方式一定是flex了! 说一下大致思路(布局上),笔者将整个组件分为两部分:分别是 头部的当前日期(年月)显示,以及左右两侧的切换按钮 当前切换月份的日期显示 头部的布局自不多说:一个 display:flex; 加上 align-items:center;

flying meng的菜鸟居 5335

CSS篇-05 Flex布局基础讲解(三、换行对齐的理解,以及伸缩项的排序)

默认不会换行 <style> *{ padding: 0; margin: 0; } ul{ list-style: none; width: 600px; height: 500px; bord...

weixin_44552302的博客 1623

线结构光三维重建(二):光平面标定与激光轮廓提取的实战优化

本文深入探讨了线结构光三维重建中的光平面标定与激光轮廓提取两大核心环节的实战优化。详细介绍了从棋盘格标定板法到自动化高鲁棒性标定的流程优化,并分享了针对复杂工业场景(如低对比度、高反光表面)的激光轮廓提取组合策略,旨在提升三维重建系统的整体精度与稳定性。

weixin_29057237的博客 331

CSS学习:flex布局

1、flex布局 flex 是 flexible Box 的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性; 任何一个容器都可以指定为 flex 布局; 给父盒子设为 flex 布局以后,子元素的 float、clear 和 vertical-align 属性将失效; 采用 flex 布局的元素,称为 flex 容器,它的所有子元素自动成为容器成员,称为 flex 项目 2、父项常见属性 flex-direction:设置主轴的方向 row(默认值):主轴为水平方向,起点在左端。 ro

weixin_42750434的博客 373

antv x6 沿边图标循环动画实现

2.使用transition给边设置动画,利用complte方法实现循环动画。实现效果,如下图,边上存在两个图标,要求图标延边一直循环动画。1.注册一个自定义边,边上定义两个图标,并设置其初始位置。

lingliu0824的博客 3366

VMware ESXI 7.0实战:4T硬盘RAID1配置与性能调优全记录

本文详细记录了在VMware ESXI 7.0环境下,为Dell服务器配置两块4T硬盘组建RAID1并进行深度性能调优的全过程。文章重点解析了RAID控制器写入策略(Write-Back with BBU)、读取策略(Read-Ahead)的关键选择,并深入探讨了在ESXI虚拟机层面通过选用PVSCSI控制器、调整虚拟磁盘缓存策略(scsiX:Y.caching)等技巧,以最大化满足数据分析等IO密集型工作负载的需求,最终实现性能的显著提升。

gaochao的博客 259

flex 属性1 方向 换行 对齐

display:flex 设置盒子为伸缩容器盒子里的子()元素(块元素,行内,行内块)都变成,一旦成为了伸缩项目,全都会“块状化”默认主轴flex-direction:主轴方向flex-wrap:主轴换行flex-flow:flex-direction flex wrap 复合属性主轴对齐:justify-content侧轴对齐:单行:align-items多行:align-content。

u014378108的博客 2468

STM32F103多通道PWM输出避坑指南:TIM1_CH1异常输出的解决方案

本文深入解析STM32F103多通道PWM输出中的TIM1_CH1异常问题,提供从时钟配置到GPIO复用的系统化解决方案。通过黄金法则配置流程和高级调试技巧,帮助开发者快速定位并解决PWM输出不稳定、占空比异常等问题,同时拓展多定时器协同和互补PWM等高级应用场景。

weixin_29194817的博客 117

flex布局换行与换行对齐方式

m0_64684712的博客 2653

使用广播星历进行 GPS 卫星位置的计算

目录1.计算卫星运动的平均角速度 n2.计算观测瞬间卫星的近地点角3.计算偏近点角4.计算真近点角 f5.计算升交角距 6.计算摄动改正项7.进行摄动改正 8.计算卫星在轨道面坐标系中的位置9.计算观测瞬间升交点的经度 L10.计算卫星在瞬时地球坐标系中的位置11.计算卫星在协议地球坐标系中的位置使用广播星历进行GPS卫星位置的计算的详细步骤如下:关于在广播星历中各参数的分布情况可以参考下图:首先根据广播星历中给出的参数 计算参考时刻(TOE) 的平均角速度 式中,GM为万有引力常数 G 与地球总质量

qq_43381998的博客 5568

modbus-esp8266库深度解析:工业级Modbus协议栈实现

Modbus是一种广泛应用于工业自动化领域的通用串行通信协议,其核心在于标准化的功能码、寄存器模型与帧结构设计。基于RTU、ASCII和TCP三种传输变体,Modbus协议通过主从架构实现设备间可靠数据交互,具备低开销、高兼容性与强实时性等技术价值。在边缘计算与工业物联网场景中,它被广泛用于PLC通信、传感器数据采集、HMI集成及远程固件升级(FOTA)等关键任务。针对ESP8266/ESP32等Wi-Fi微控制器平台,modbus-esp8266库提供了完整协议栈支持,涵盖多实例并发、回调驱动架构、零拷贝

weixin_42315569的博客 349

CSS3 div换行 justify-content:space-around 或spacebetween最后一行问题

用 container::after添加一个虚拟元素 但其中有一些个细节 //容器 .container{ //让子元素自动换行布局 display: flex; justify-content: space-between; flex-wrap: wrap; // div之类的元素 div{ width:100px; height:100px; backgroun

weixin_53296753的博客 1232

逆向工程实战:从零解析微信PC版协议,并用开源代码构建你的私有化接口

本文详细解析了微信PC版的通信协议架构,从逆向工程基础到网络流量捕获、关键函数定位与HOOK技术实践,最终通过开源代码构建私有化接口。文章重点介绍了协议特征分析、HOOK技术应用以及安全实践,帮助开发者深入理解企业级通信协议的设计逻辑和安全机制。

weixin_30496999的博客 392

让CSS flex布局最后一行列表左对齐的N种方法

一、justify-content对齐问题描述 在CSS flex布局中,justify-content属性可以控制列表的水平对齐方式,例如space-between值可以实现两端对齐。 但是,如果最后一行的列表的个数不满,则就会出现最后一行没有完全垂直对齐的问题。 如下代码: .container { display: flex; justify-content: sp...

xiaojing的博客 3077

IDEA出现闪退或打不开的解决方法

本身项目比较大,为了打开这个软件,可调节IDEA中安装的bin目录下有个。打开IDEA的时候过一会便闪退,可以再IDEA的右下角看到如下提示。(如果没有该提示,软件右下角也会有个红色感叹号,点开查看原因即可)闪退的多数原因大致是out of memory,内存溢出。查看任务管理器中的进程:(发现内存随时有溢出的情况)但也需要注意,该参数并不是越大越好,适中即可。只有个别原因是需要管理员权限就可执行!可以尽量减少软件的启动。

码农研究僧的博客 5944

WINCC7.3破解文件

WINCC7.3硬件够破解文件,有需要的下载!WINCC7.3硬件够破解文件,有需要的下载!

弹性布局多列换行居左布局,flex布局下两端对齐,不满左对齐

弹性布局多列换行居左布局,flex布局下两端对齐,不满左对齐 问题情境: 在flex布局下,多行排列,如何让flex布局最后一行没有排满时,向左对齐排列且与上面的行间距相同。 实现效果: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <style type="text/css">

qq_35779070的博客 1万+

Camera2Demo

在Camera2 的基础上进行封装,使得Camera2一堆初始化逻辑与Activity分离,降低耦合度,完成预览拍照并保存的操作

flex布局:两端对齐,自动换行

需求: 一个大盒子里,小盒子整齐排列,自动换行。 直接上代码: <div class="cont"> <div class="card"></div> <div class="card"></div> <div class="card"></div> <div class="card">&lt...

九日的博客 7496

深度学习工具包 DeepLearningToolbox

深度学习工具包Deprecation notice.-----This toolbox is outdated and no longer maintained.There are much better tools available for deep learning than this toolbox, e.g. [Theano](http://deeplearning.net/software/theano/), [torch](http://torch.ch/) or [tensorflow](http://www.tensorflow.org/)I would suggest you use one of the tools mentioned above rather than use this toolbox.Best, Rasmus.DeepLearnToolbox================A Matlab toolbox for Deep Learning.Deep Learning is a new subfield of machine learning that focuses on learning deep hierarchical models of data.It is inspired by the human brain&#39;s apparent deep (layered, hierarchical) architecture.A good overview of the theory of Deep Learning theory is[Learning Deep Architectures for AI](http://www.iro.umontreal.ca/~bengioy/papers/ftml_book.pdf)For a more informal introduction, see the following videos by Geoffrey Hinton and Andrew Ng.* [The Next Generation of Neural Networks](http://www.youtube.com/watch?v=AyzOUbkUf3M) (Hinton, 2007)* [Recent Developments in Deep Learning](http://www.youtube.com/watch?v=VdIURAu1-aU) (Hinton, 2010)* [Unsupervised Feature Learning and Deep Learning](http://www.youtube.com/watch?v=ZmNOAtZIgIk) (Ng, 2011)If you use this toolbox in your research please cite [Prediction as a candidate for learning deep hierarchical models of data](http://www2.imm.dtu.dk/pubdb/views/publication_details.php?id=6284)```@MASTERSTHESIS\{IMM2012-06284, author = "R. B. Palm", title = "Prediction as a candidate for learning deep hierarchical models of data", year = "2012",}```Contact: rasmusbergpalm at gmail dot comDirectories included in the toolbox-----------------------------------`NN/` - A library for Feedforward Backpropagation Neural Networks`CNN/` - A library for Convolutional Neural Networks`DBN/` - A library for Deep Belief Networks`SAE/` - A library for Stacked Auto-Encoders`CAE/` - A library for Convolutional Auto-Encoders`util/` - Utility functions used by the libraries`data/` - Data used by the examples`tests/` - unit tests to verify toolbox is workingFor references on each library check REFS.mdSetup-----1. Download.2. addpath(genpath(&#39;DeepLearnToolbox&#39;));Example: Deep Belief Network---------------------```matlabfunction test_example_DBNload mnist_uint8;train_x = double(train_x) / 255;test_x = double(test_x) / 255;train_y = double(train_y);test_y = double(test_y);%% ex1 train a 100 hidden unit RBM and visualize its weightsrand(&#39;state&#39;,0)dbn.sizes = [100];opts.numepochs = 1;opts.batchsize = 100;opts.momentum = 0;opts.alpha = 1;dbn = dbnsetup(dbn, train_x, opts);dbn = dbntrain(dbn, train_x, opts);figure; visualize(dbn.rbm{1}.W&#39;); % Visualize the RBM weights%% ex2 train a 100-100 hidden unit DBN and use its weights to initialize a NNrand(&#39;state&#39;,0)%train dbndbn.sizes = [100 100];opts.numepochs = 1;opts.batchsize = 100;opts.momentum = 0;opts.alpha = 1;dbn = dbnsetup(dbn, train_x, opts);dbn = dbntrain(dbn, train_x, opts);%unfold dbn to nnnn = dbnunfoldtonn(dbn, 10);nn.activation_function = &#39;sigm&#39;;%train nnopts.numepochs = 1;opts.batchsize = 100;nn = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.10, &#39;Too big error&#39;);```Example: Stacked Auto-Encoders---------------------```matlabfunction test_example_SAEload mnist_uint8;train_x = double(train_x)/255;test_x = double(test_x)/255;train_y = double(train_y);test_y = double(test_y);%% ex1 train a 100 hidden unit SDAE and use it to initialize a FFNN% Setup and train a stacked denoising autoencoder (SDAE)rand(&#39;state&#39;,0)sae = saesetup([784 100]);sae.ae{1}.activation_function = &#39;sigm&#39;;sae.ae{1}.learningRate = 1;sae.ae{1}.inputZeroMaskedFraction = 0.5;opts.numepochs = 1;opts.batchsize = 100;sae = saetrain(sae, train_x, opts);visualize(sae.ae{1}.W{1}(:,2:end)&#39;)% Use the SDAE to initialize a FFNNnn = nnsetup([784 100 10]);nn.activation_function = &#39;sigm&#39;;nn.learningRate = 1;nn.W{1} = sae.ae{1}.W{1};% Train the FFNNopts.numepochs = 1;opts.batchsize = 100;nn = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.16, &#39;Too big error&#39;);```Example: Convolutional Neural Nets---------------------```matlabfunction test_example_CNNload mnist_uint8;train_x = double(reshape(train_x&#39;,28,28,60000))/255;test_x = double(reshape(test_x&#39;,28,28,10000))/255;train_y = double(train_y&#39;);test_y = double(test_y&#39;);%% ex1 Train a 6c-2s-12c-2s Convolutional neural network %will run 1 epoch in about 200 second and get around 11% error. %With 100 epochs you&#39;ll get around 1.2% errorrand(&#39;state&#39;,0)cnn.layers = { struct(&#39;type&#39;, &#39;i&#39;) %input layer struct(&#39;type&#39;, &#39;c&#39;, &#39;outputmaps&#39;, 6, &#39;kernelsize&#39;, 5) %convolution layer struct(&#39;type&#39;, &#39;s&#39;, &#39;scale&#39;, 2) %sub sampling layer struct(&#39;type&#39;, &#39;c&#39;, &#39;outputmaps&#39;, 12, &#39;kernelsize&#39;, 5) %convolution layer struct(&#39;type&#39;, &#39;s&#39;, &#39;scale&#39;, 2) %subsampling layer};cnn = cnnsetup(cnn, train_x, train_y);opts.alpha = 1;opts.batchsize = 50;opts.numepochs = 1;cnn = cnntrain(cnn, train_x, train_y, opts);[er, bad] = cnntest(cnn, test_x, test_y);%plot mean squared errorfigure; plot(cnn.rL);assert(er<0.12, &#39;Too big error&#39;);```Example: Neural Networks---------------------```matlabfunction test_example_NNload mnist_uint8;train_x = double(train_x) / 255;test_x = double(test_x) / 255;train_y = double(train_y);test_y = double(test_y);% normalize[train_x, mu, sigma] = zscore(train_x);test_x = normalize(test_x, mu, sigma);%% ex1 vanilla neural netrand(&#39;state&#39;,0)nn = nnsetup([784 100 10]);opts.numepochs = 1; % Number of full sweeps through dataopts.batchsize = 100; % Take a mean gradient step over this many samples[nn, L] = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.08, &#39;Too big error&#39;);%% ex2 neural net with L2 weight decayrand(&#39;state&#39;,0)nn = nnsetup([784 100 10]);nn.weightPenaltyL2 = 1e-4; % L2 weight decayopts.numepochs = 1; % Number of full sweeps through dataopts.batchsize = 100; % Take a mean gradient step over this many samplesnn = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.1, &#39;Too big error&#39;);%% ex3 neural net with dropoutrand(&#39;state&#39;,0)nn = nnsetup([784 100 10]);nn.dropoutFraction = 0.5; % Dropout fraction opts.numepochs = 1; % Number of full sweeps through dataopts.batchsize = 100; % Take a mean gradient step over this many samplesnn = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.1, &#39;Too big error&#39;);%% ex4 neural net with sigmoid activation functionrand(&#39;state&#39;,0)nn = nnsetup([784 100 10]);nn.activation_function = &#39;sigm&#39;; % Sigmoid activation functionnn.learningRate = 1; % Sigm require a lower learning rateopts.numepochs = 1; % Number of full sweeps through dataopts.batchsize = 100; % Take a mean gradient step over this many samplesnn = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.1, &#39;Too big error&#39;);%% ex5 plotting functionalityrand(&#39;state&#39;,0)nn = nnsetup([784 20 10]);opts.numepochs = 5; % Number of full sweeps through datann.output = &#39;softmax&#39;; % use softmax outputopts.batchsize = 1000; % Take a mean gradient step over this many samplesopts.plot = 1; % enable plottingnn = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.1, &#39;Too big error&#39;);%% ex6 neural net with sigmoid activation and plotting of validation and training error% split training data into training and validation datavx = train_x(1:10000,:);tx = train_x(10001:end,:);vy = train_y(1:10000,:);ty = train_y(10001:end,:);rand(&#39;state&#39;,0)nn = nnsetup([784 20 10]); nn.output = &#39;softmax&#39;; % use softmax outputopts.numepochs = 5; % Number of full sweeps through dataopts.batchsize = 1000; % Take a mean gradient step over this many samplesopts.plot = 1; % enable plottingnn = nntrain(nn, tx, ty, opts, vx, vy); % nntrain takes validation set as last two arguments (optionally)[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.1, &#39;Too big error&#39;);```[![Bitdeli Badge](https://d2weczhvl823v0.cloudfront.net/rasmusbergpalm/deeplearntoolbox/trend.png)](https://bitdeli.com/free "Bitdeli Badge")

C# WinForm 基于DirectShow.dll编写的程序,可边预览边保存视频,音频和图片

基于微软的DirectShow.dll的二次开发1.自动识别连接的摄像头跟麦克风且可以对其进行选择(默认选中第一个)2.可录制wmv和avi两种格式的视频并且都带有音频,avi可以录制的分辨率和帧数进行选择,wmv默认进行了淸晰度优化如不喜欢可去除代码中有相关提示3.可在预览点开之后进行拍照,也可边录制视频边拍照4.添加了视频和音频的压缩功能(酌情使用)这次二次开发发现C#对DirectShow的相关信息太少,这次做完也不敢藏私共享出来,还望大家指正

盒子flex浮动布局并且换行后左对齐

今天有人问到下面这样一个问题 他想要的效果: 而他做出来的效果是: 他这个是flex布局,完了外层的盒子给了个 justify-content: space-between; 样式,这样大盒子里每个小视图块就均分了,但是换行后假如每行只能排4个,如果下一行不够4个,被两端对齐。 给出我的做法: 1、基本思路是外层容器flex布局,让内部的每个小容器从左向右按顺序排列(justify-content: flex-start;),并且允许换行(flex-start;flex-wrap: wrap;); 2、

格の调 6208

flex布局如何让最后一行居左对齐

问题描述 在 flex 布局中经常用到下面类似代码 .top-list { display: flex; display: -webkit-flex; flex-wrap: wrap;/*自动换行*/ justify-content: space-between;/*每个item之间的间距自动适应等宽*/ } 如果在一行的情况下,上面可以完美的呈现出来,但是若有多个item,第一...

Xiao_peng117的博客 3589

flex布局[一行三个元素,剩下的元素自动换行,左对齐]

需求: 每一行三个元素,剩下的元素自动换行,而且左对齐[如图] 实现:

H_keoow的博客 2万+

flex布局自动换行并对齐

HTML代码 <view class="con"> <view class="one"> <view class="">237</view> <view class="">浏览次数</view> </view> <view class="one"> <view class="">237</view> <view

Hellow_Mr的博客 4898

解决flex布局warp自动换行下最后一行居中问题

1、现象: 这是一段很简单的flex弹性布局代码: HTML: <div> <div class="flex-test"> <div class="box-test">1</div> <div class="box-test">2</div> <div class="box-test">3</div> <div class="box-test".

♀我爱摇滚,更爱金属乐♀ 8559

flex布局最后一行靠左对齐

 有时候会遇到这样的情况,最后一行不够,用了弹性布局,居中了 解决方法: .contact { display: flex; flex-wrap: wrap; justify-content: flex-start;/*靠左对其*/ } .contact > view:nth-child(odd) { margin: 20rpx 15rpx 0 30rpx;/*给奇数项设置*//*nth-child是从1开始!!!*/ } .contact > view:nth-child(even)

苦夏木禾 2577

flex布局,最后一行靠左显示

flex布局,最后一行靠左显示 // 最后一行靠左显示 flex-wrap: wrap; align-content: flex-start; <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> * {

酱子 5192

解决flex布局最后一行元素对齐问题

在使用flex布局时,为了让元素自动铺满宽度,我们会用justify-content: space-between;,但是当最后一行元素个数不足时,会出现下面的情况。 看了网上的方法都是在后面补上差的个数,所以我这里的解决方法也是补齐个数。考虑到有一种情况,元素个数可能不是固定的,我们就无法知道具体相差的个数来填充,比如列表是后端返回的数据,所以这里通过循环动态添加相差的个数。 我这里就简单来了,我想要呈现的是1行4列,总个数是9个,所以我就加上以下内容, list.length 是页面要显示的总记录数

weixin_45042868的博客 3763

flex布局一行三个_CSS Flex布局

Flex之前在flex布局出现以前,css布局大致就以下几种布局:主要使用:normal flow 正常流、文档流float + clearfixposition: relative + position: absolutedisplay: inline-block负 marginFlex来了!css3新的布局方式——Flex布局!CSS3提供了一个额外的布局系统。在这个新的框模型中,框的子代采用...

weixin_39636079的博客 2万+
上一篇: 踩坑:小程序 new Date(“YYYY-MM-DD hh:mm:ss”)在ios手机上显示null
下一篇: 【Markdown编辑器实用技巧】
TurtleOrange
博客等级 码龄9年 71粉丝 70原创
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明:

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

余额充值