html – 使用flexbox在两行上对齐图像
发布时间:2020-12-14 16:35:16 所属栏目:资源 来源:网络整理
导读:我正在尝试创建一个包含6个框的Flexbox. 但是,由于某些原因,它们的行为不正确,因为它们的大小不同. 他们必须表现得像这样: /* ================================= Base Styles ==================================== */body { display: flex; flex-directio
我正在尝试创建一个包含6个框的Flexbox.
但是,由于某些原因,它们的行为不正确,因为它们的大小不同. 他们必须表现得像这样: /* ================================= Base Styles ==================================== */ body { display: flex; flex-direction: column; min-height: 100vh; } .row { flex: 1; } /* ================================= Media Queries ==================================== */ @media (min-width: 769px) { .main-header,.main-nav,.row { display: flex; } .main-header { flex-direction: column; align-items: center; } .col { flex: 1 50%; } .row { flex-wrap: wrap; } .item-2 { order: -1; } } @media (min-width: 1025px) { .main-header { flex-direction: row; justify-content: space-between; } .col { flex-basis: 0; } .item-1 { flex-grow: 1.4; } } <div class="row"> <div class="item-1 col"> <img src="http://blackrockdigital.github.io/startbootstrap-freelancer/img/portfolio/cabin.png"> </div><!--/.primary--> <div class="item-2 col"> <img src="http://blackrockdigital.github.io/startbootstrap-freelancer/img/portfolio/cabin.png"> </div><!--/.secondary--> <div class="item-3 col"> <img src="http://blackrockdigital.github.io/startbootstrap-freelancer/img/portfolio/cabin.png"> </div><!--/.tertiary--> <div class="item-4 col"> <img src="http://blackrockdigital.github.io/startbootstrap-freelancer/img/portfolio/cabin.png"> </div><!--/.tertiary--> <div class="item-5 col"> <img src="http://blackrockdigital.github.io/startbootstrap-freelancer/img/portfolio/cabin.png"> </div><!--/.tertiary--> <div class="item-6 col"> <img src="http://blackrockdigital.github.io/startbootstrap-freelancer/img/portfolio/cabin.png"> </div><!--/.tertiary--> </div> 你可以在这里查看JSFIDDLE:https://jsfiddle.net/ju157mnj/2/ 解决方法.row { display: flex; flex-wrap: wrap; justify-content: center; } .col { flex: 0 0 calc(33.33% - 30px); /* flex-basis adjustment for margin */ margin: 5px; } img { width: 100%; } <div class="row"> <div class="item-1 col"> <img src="http://blackrockdigital.github.io/startbootstrap-freelancer/img/portfolio/cabin.png"> </div><!--/.primary--> <div class="item-2 col"> <img src="http://blackrockdigital.github.io/startbootstrap-freelancer/img/portfolio/cabin.png"> </div><!--/.secondary--> <div class="item-3 col"> <img src="http://blackrockdigital.github.io/startbootstrap-freelancer/img/portfolio/cabin.png"> </div><!--/.tertiary--> <div class="item-4 col"> <img src="http://blackrockdigital.github.io/startbootstrap-freelancer/img/portfolio/cabin.png"> </div><!--/.tertiary--> <div class="item-5 col"> <img src="http://blackrockdigital.github.io/startbootstrap-freelancer/img/portfolio/cabin.png"> </div><!--/.tertiary--> <div class="item-6 col"> <img src="http://blackrockdigital.github.io/startbootstrap-freelancer/img/portfolio/cabin.png"> </div><!--/.tertiary--> </div> Revised Fiddle (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |