Flexbox 不包装

Question

我用 flexbox 做了这个：

但是文字没有换行？

我的代码：

<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>

手写笔：

.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

有什么想法吗？

Answer 1

这不是 flexbox 的问题，你需要使用 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>

Answer 2

.Grid {
  display: flex;
  flex-flow: row; 
  flex-wrap: wrap;
}

Flexbox 不包装

Flexbox not wrapping

html

css

flexbox

stylus