Flexbox with Unordered List

Flexbox with Unordered list

You need to apply the flex properties to the <ul>

ul {
display: flex;
flex-direction: row; <-- not needed as this is the default behavior
flex-wrap: wrap;
}

Putting the properties on the <div> tells it to display the <ul> in flex, not <li>.

Flexbox with ul list

Wrap the flexible box row and give the items flex-basis: 50% or width: 50%

.cont {  display: flex;  flex-flow: row wrap; /* Shorthand for flex-direction: row and flex-wrap: wrap */}.cont li {  flex-basis: 50%; /* or width: 50% */}
<ul class="cont">  <li>text</li>  <li>text</li>  <li>text</li>  <li>text</li></ul>

Make Unordered list rensponsive with Flex box

Have a look at this (almost) exhaustive tutorial to be able to use the full power of flexbox. I got this result:

.parent {  font-family: Arial, sans-serif;  font-size: 12px;}
.child { display: flex; flex-wrap: wrap; list-style-type: none; margin: 5px; padding: 0; height: 100px;}
.child li { width: 23%; height: 49px; margin: 1px 1%; text-align: center; background: #069; color: #fff; display: flex; align-items: center; justify-content: center;}
<div class="parent">  <ul class="child">    <li>A</li>    <li>B</li>    <li>C</li>    <li>D</li>    <li>E</li>    <li>F</li>    <li>G</li>    <li>H</li>  </ul></div>

How to make unordered lists responsive with flexbox?

You can set a @media query breakpoint. In this example, when the screen is 991px or slimmer, I apply flex-wrap to the parent, and a flex-basis of 50% to the children.

ul {  display: flex;  list-style-type: none;   padding: 0;}
li { flex: auto;}
@media (max-width: 991px) { ul { flex-wrap: wrap; } li { flex-basis: 50%; }}
<ul>  <li>list 1<br/><br/>Lorem Ipsum<br/>Lorem Ipsum<br/>Lorem Ipsum</li>  <li>list 2<br/><br/>Lorem Ipsum<br/>Lorem Ipsum<br/>Lorem Ipsum</li>  <li>List 3<br/><br/>Lorem Ipsum<br/>Lorem Ipsum<br/>Lorem Ipsum</li>  <li>list 4<br/><br/>Lorem Ipsum<br/>Lorem Ipsum<br/>Lorem Ipsum</li></ul>

Does flexbox work differently with items in an unordered list?

the ul has padding. add some width to ul and the spacing will work

body {
background-color: black;
box-sizing: border-box;
}

header {
display: flex;
background-color: white;
justify-content: space-between;
align-items: center;
}

h1 {
color: white;
background-color: blue;
}

ul {
border:solid 1px black;
display: flex;
width:50vw;

list-style: none;
justify-content: space-between;
}

li {
border: 1px solid red;
}
<header>
<div>
<h1>Sample Logo</h1>
</div>
<div>
<nav class="navbar">
<ul>
<li>Home</li>
<li>Contacts</li>
<li>Companies</li>
<li>Calendar</li>
</ul>
</nav>
</div>
</header>

unordered list to flexbox

Step 1: Create Pagination.vue component

<template>
<ul class="pagination">
<li class="pagination-item">
<button type="button" @click="onClickFirstPage" :disabled="isInFirstPage">First</button>
</li>
<li class="pagination-item">
<button type="button" @click="onClickPreviousPage" :disabled="isInFirstPage">Previous</button>
</li>
<li :key="page.id" v-for="page in pages" class="pagination-item">
<button type="button" @click="onClickPage(page.name)" :disabled="page.isDisabled"
:class="{ active: isPageActive(page.name) }">{{ page.name }}</button>
</li>
<li class="pagination-item">
<button type="button" @click="onClickNextPage" :disabled="isInLastPage">Next</button>
</li>
<li class="pagination-item">
<button type="button" @click="onClickLastPage" :disabled="isInLastPage">Last</button>
</li>
</ul>
</template>

<script>
export default {
name: 'pagination',
props: {
maxVisibleButtons: {
type: Number,
required: false,
default: 3
},
totalPages: {
type: Number,
required: true
},
perPage: {
type: Number,
required: true
},
currentPage: {
type: Number,
required: true
}
},
computed: {
isInFirstPage () {
return this.currentPage === 1
},
isInLastPage () {
if (this.totalPages === 0) {
return true
}
return this.currentPage === this.totalPages
},
startPage () {
// When on the first page
if (this.currentPage === 1) {
return 1
}
// When on the last page
if (this.totalPages < this.maxVisibleButtons) {
return 1
}
if (this.currentPage === this.totalPages) {
return this.totalPages - this.maxVisibleButtons + 1
}
// When in between
return this.currentPage - 1
},
endPage () {
if (this.totalPages === 0) {
return 1
}
if (this.totalPages < this.maxVisibleButtons) {
return this.totalPages
}
return Math.min(this.startPage + this.maxVisibleButtons - 1, this.totalPages)
},
pages () {
const range = []
for (let i = this.startPage; i <= this.endPage; i+= 1 ) {
range.push({
name: i,
isDisabled: i === this.currentPage
})
}
return range
}
},
methods: {
onClickFirstPage () {
this.$emit('pagechanged', 1)
},
onClickPreviousPage () {
this.$emit('pagechanged', this.currentPage - 1)
},
onClickPage (page) {
this.$emit('pagechanged', page)
},
onClickNextPage () {
this.$emit('pagechanged', this.currentPage + 1)
},
onClickLastPage () {
this.$emit('pagechanged', this.totalPages)
},
isPageActive (page) {
return this.currentPage === page
}
}
}
</script>

<style scoped>
.pagination {
list-style-type: none;
float: right;
margin: 10px 0;
}
.pagination-item {
display: inline-block;
}
.active {
background-color: #943849;
color: #ffffff !important;
font-weight: bold;
}
button[disabled], html input[disabled] {
cursor: default;
color: lightgray;
}
</style>

Step 2: Add Pagination component reference in app.vue component

import Pagination from './components/Pagination'

Add Pagination component in app.vue

export default {
components: {
Pagination,
},

Step 3: Create model data with pagination object

data() {
return {
items:[],
page: 1,
totalPages: 0,
totalRecords: 0,
recordsPerPage: 10
}
},

Step 4: Create an methods for load data and adding pagination

methods: {
loadPressRelease () {
this.showLoader = true
axios.get(`https://zbeta2.mykuwaitnet.net/backend/en/api/v2/media-center/press-release/?page=${this.page}&page_size=${this.recordsPerPage}&type=5`)
.then(response => {
this.showLoader = false
this.items = response.data
this.totalPages = Math.ceil(response.data.count / this.recordsPerPage)
this.totalRecords = response.data.count
})
},
onPageChange(page) {
this.page = page
this.loadPressRelease()
}
}

Step 5: Default page load on created methods

created() {
this.loadPressRelease()
},

Step 6: HTML template with pagination reference

<div id="app">
<ul>
<li v-for="item in items.results" :key="item.id">
{{ item.pub_date }} {{item.image && item.image.file}} {{item.title}}
<div class="downloads">
<span v-for="downloadable in item.downloadable.filter(d => !!d.document_en)"
:key="downloadable.id">{{ downloadable.document_en.file }}
</span>
</div>
</li>
</ul>
<Pagination v-if="items.results" :total-pages="totalPages" :per-page="this.recordsPerPage" :current-page="page" @pagechanged="onPageChange" />
</div>

DEMO with Loader

Flexbox row layout with ul followed by input

display: contents; on the ul then flex:1 for the input

div {
display: flex;
width: 160px;
flex-wrap: wrap;
}

ul {
list-style: none;
display: contents;
margin: 0;
padding: 0;
}

li {
border: 1px solid gray;
padding: 2px;
}

input {
min-width: 40px;
flex: 1;
}
<div>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
</ul>
<input>
</div>

Unordered list items wont align in the center while using flexbox/flex direction column in a sidebar, also is there a better way to achieve this?

I have a more good solution for the problem:

.sidebar-navitem {
width: 100%;
height: 50px;
display: flex;
flex-direction: column;
align-items: center;
}

align-items:center was not working because it is required to set this property on a li not on ul.

If you apply this property to ul, the lis inside that are centered not the items inside li.

How to center list items with flexbox?

If I correctly understood your question (please, let me know), this is what you're after:

* {
box-sizing: border-box;
margin: 0;
padding: 0;
}

body {
background: #fff;
background: url('/img/showcase.jpg.jpg');
color: #333;
font-family: 'Open Sans', sans-serif;
line-height: 1.6;
}

#navbar,
#navbar ul {
display: flex;
}

#navbar {
align-items: center;
background-color: rgba(10, 10, 10, 0.5);
height: 60px;
justify-content: space-between;
}

#navbar ul {
justify-content: center;
width: 100%;
}

#navbar li {
list-style: none;
margin: 0 10px 0 10px;
}

.logo {
margin-left: 20px;
}
<nav id="navbar">
<div class="logo">
<h1>Welcome</h1>
</div>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Home</a></li>
<li><a href="#">Home</a></li>
<li><a href="#">Home</a></li>
</ul>
</nav>


Related Topics



Leave a reply



Submit