Question

我正在使用display：flex制作一些很棒的页面。在这个div中，我无法创建换行符。这是我的jsfiddle：https://jsfiddle.net/vp4rzk8v/ 我只需要在新线上制作“Kartlar”。这是我的代码：

import java.util.Date

sealed trait Field {
  def clazz: Class[_]

  def name: String
}

case class StringField(name: String) extends Field {
  override def clazz: Class[_] = classOf[String]
}

case class DateField(name: String) extends Field {
  override def clazz: Class[_] = classOf[Date]
}

case class FieldMapping(fieldInConnector1: Option[Field],
                        fieldInConnector2: Option[Field],
                        selected: Boolean,
                        defaultValue: String)

import io.circe.generic.semiauto.{deriveDecoder, deriveEncoder}
import io.circe.{Decoder, Encoder}
object CirceBoilerplateForConfigs {
  implicit val stringDecoder: Decoder[StringField] = deriveDecoder[StringField]
  implicit val stringEncoder: Encoder[StringField] = deriveEncoder[StringField]

  implicit val dateDecoder: Decoder[DateField] = deriveDecoder[DateField]
  implicit val dateEncoder: Encoder[DateField] = deriveEncoder[DateField]

  implicit val fieldDecoder: Decoder[Field] = deriveDecoder[Field]
  implicit val fieldEncoder: Encoder[Field] = deriveEncoder[Field]

  implicit val fooDecoder: Decoder[FieldMapping] = deriveDecoder[FieldMapping]
  implicit val fooEncoder: Encoder[FieldMapping] = deriveEncoder[FieldMapping]
}

Answer 1

只需将flex-wrap: wrap;和align-content: center;添加到您的.customcol规则中，然后将带有 Kartlar 的div设置为100%。这里有更新的小提琴https://jsfiddle.net/vp4rzk8v/1/

css显示flex和new line

1 个答案: