4 Replies - 371 Views - Last Post: 24 July 2019 - 11:35 PM

#1 Petro Gromovo   User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 21
  • Joined: 14-February 19

How make different number of columns with flexbox ?

Posted 10 July 2019 - 07:41 AM

Hello!

With bootstrap layout I make
		<div ="item_columns_container" v-show="hostelFacilities.length > 0">
			<h4 class="mt-4">
				 Has facilities
			</h4>
			<div class="row">
				<div :key="nextFacility.id" class="list-group-item col-12 col-sm-4" v-for="nextFacility, index in hostelFacilities">
					<i :class="'i_link '+getHeaderIcon('check')"></i>&nbsp;{{ nextFacility.facility_name }}
				</div>
			</div>
		</div>

when I need to show different number of columns on different devices.
But how can it be with flexbox ?

Thanks!

Is This A Good Question/Topic? 0
  • +

Replies To: How make different number of columns with flexbox ?

#2 Dormilich   User is offline

  • 痛覚残留
  • member icon

Reputation: 4235
  • View blog
  • Posts: 13,423
  • Joined: 08-June 10

Re: How make different number of columns with flexbox ?

Posted 10 July 2019 - 07:55 AM

View PostPetro Gromovo, on 10 July 2019 - 04:41 PM, said:

But how can it be with flexbox ?

You do that with grid, not with flexbox.
Was This Post Helpful? 0
  • +
  • -

#3 Petro Gromovo   User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 21
  • Joined: 14-February 19

Re: How make different number of columns with flexbox ?

Posted 10 July 2019 - 08:23 AM

Sorry, if I put my question in nonclear way. I just want some hint how that can be done with flexbox ?
Was This Post Helpful? 0
  • +
  • -

#4 Dormilich   User is offline

  • 痛覚残留
  • member icon

Reputation: 4235
  • View blog
  • Posts: 13,423
  • Joined: 08-June 10

Re: How make different number of columns with flexbox ?

Posted 10 July 2019 - 08:45 AM

View PostPetro Gromovo, on 10 July 2019 - 05:23 PM, said:

I just want some hint how that can be done with flexbox ?


It can't. Flexbox is the wrong tool for that.

see also https://developer.mo.../CSS/CSS_layout
Was This Post Helpful? 0
  • +
  • -

#5 sagar.chavada   User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 17
  • Joined: 10-April 19

Re: How make different number of columns with flexbox ?

Posted 24 July 2019 - 11:35 PM

My point of view you should try this :

HTML :
<div class="items">
  <div class="item">Heriberto Nickel</div>
  <div class="item">Brittaney Haliburton</div>
  <div class="item">Maritza Winkler</div>
  <div class="item">Carmon Rigg</div>
  <div class="item">Alice Marmon</div>
  <div class="item">Lyman Steakley</div>
  <div class="item">Zenia Correa</div>
</div>


CSS :
.items {
	display: flex;
	flex-wrap: wrap;
}
.items .item {
	flex: 1 0 25%;
  box-sizing: border-box;
  background: #e0ddd5;
  color: #171e42;
  padding: 10px;
}

This post has been edited by astonecipher: 25 July 2019 - 04:33 AM
Reason for edit:: code tags

Was This Post Helpful? 0
  • +
  • -

Page 1 of 1