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
How to Keep The Width of The Parent Element When Position: Fixed Is Applied
Foundation 5 and Page Printing
CSS: Inline Element Stretch to Fill Available Horizontal Space of Container
How to Get a Custom Icon in a Back Button
How to Use CSS Variables in Twitter-Bootstrap 4 $Theme-Colors Array
How to Convert Whole Folder with Convert-Sass? (Scss to Sass)
Fontello Glyph Font Odd Behaviour on Firefox, Shows Unicode Codes Instead of Icons
Creating a Foundation-Style Block Grid in Bootstrap 3
How to Get The CSS Counter Value of The Parent
Transition Only for The Border on Hover, But Not for Background
Disabling Font Ligatures CSS (Letter Combining)
CSS3 Transforms and Transitions (Webkit)
Textfield CSS Styling Using Javafx
CSS How to Position an Element in a Middle (Half Height/Vertical 50%) of Another Element