从flex容器中排除子元素

时间:2018-10-15 15:47:28

标签: css css3 sass flexbox centering

class CustomerPause < ApplicationRecord

  enum status: {disabled: 0, scheduled: 1, ongoing: 2, finished: 3}, _prefix: :status

  belongs_to :customer
  after_save :update_customer_status

  protected

  #update customer status to match the status of the pause accordingly
  def update_customer_status
    if (saved_change_to_status? || new_record?)
      if status_ongoing? && customer.status_active?
        customer.update status: Customer::STATUS_PAUSED
      end
    end
  end

end

我有这种情况。我需要将两个图像居中放置到容器中,但需要在两个图像下的新行中显示“文本”。 我是用CSS完成的

customer = Customer.create status: :active
pause = customer.customer_pauses.create status: :disabled
pause.status = :ongoing

#this works as expected, and customer.saved_changes will contain the status change
pause.save

#This however will result in saved_changes to be empty on the customer callback "handle_status_change"
#Note that the customer status is still changed but not listed in saved_changes
customer.update customer_pauses_attributes: [pause.attributes]

文本转到新行,但达到特定分辨率。如何从Flex流中排除文本?

1 个答案:

答案 0 :(得分:2)

将文本的宽度设置为100%,然后将文本与中心对齐:

.container {
  display: flex;
  justify-content: center;
  align-content: center;
  flex-wrap: wrap;
}

.text {
  width: 100%;
  text-align: center;
}
<div class="container">
  <div class="image"><img src="https://picsum.photos/120/80?1"></div>
  <div class="image"><img src="https://picsum.photos/120/80?2"></div>
  <div class="text">Text</div>
</div>