I've made this in flexbox:
But the text is not wrapping?
My code:
<template>
<div>
<bar :title="title"></bar>
<div class="Row Center">
<div class="Profile" v-if="!loading">
<div class="Profile__body">
<div class="Profile__body__title">
<h1>{{ user.name }} {{ user.last_name }}</h1>
</div>
<div class="Profile__body__content">
<p>Mobiel: {{ user.mobile }}</p>
</div>
<div class="Profile__body__content">
<p>Email: {{ user.email }}</p>
</div>
<div class="Profile__body__content">
<p>Functie: {{ user.function }}</p>
</div>
<div class="Profile__body__content" v-if="user.about">
<p>Over Mij: {{ user.about }}</p>
</div>
<div class="Profile__body__content">
<p>Corporatie: {{ user.corporation.name }}</p>
</div>
</div>
</div>
<div class="Loader" v-if="loading">
<grid-loader :loading="loading" :color="color" :size="size"></grid-loader>
</div>
</div>
</div>
</template>
Stylus:
.Profile
panel(100%, 40%)
.Profile__body
panel-body(100%, 100%)
.Profile__body__title
space-between()
align-items center
border-bottom 1px solid $main-border-color
& > h1
margin-left 10px
.Profile__body__content
margin 10px
flex-wrap wrap
.Row
display flex
max-width 1000px
margin auto
.Center
display flex
align-items center
justify-content center
panel(height = 375, width = 100%, padding = 0px)
margin-top 50px
margin-bottom 10px
padding padding
background: $main-text-color
height height
width width
border 1px solid $main-border-color
panel-body(min-width = 300px, height = 375px, width = 35%)
flex-column()
min-width min-width
height height
width width
Any ideas?
That is not problem with flexbox, you need to use word-break: break-all
.el { display: flex; } p { width: 50px; border: 1px solid black; word-break: break-all; }
<div class="el"> <p>looooooooooooooooooooooooooooorem</p> </div>
.Grid {
display: flex;
flex-flow: row;
flex-wrap: wrap;
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.